En CSS, la propietat d'alineació vertical controla l'alineació vertical dels elements de nivell en línia o de les cel·les de la taula dins del seu element que la conté. S'aplica als elements que formen part d'una línia de text o que es mostren com a bloc en línia o cel·la de taula.
La propietat 'alineació vertical' s'utilitza habitualment per a elements en línia com imatges, text o elements de bloc en línia dins d'una línia de text. No s'aplica directament als elements a nivell de bloc; no obstant això, podeu utilitzar tècniques com flexbox o posicionament per alinear-los verticalment.
Sintaxi:
Aquí teniu la sintaxi bàsica per a la propietat vertical-align:
cadena a java booleà
selector { vertical-align: value; } El 'valor' pot ser una de les opcions següents:
| Línia de base: | Alinea la línia base de l'element amb la línia base del seu element pare. Aquest és el valor predeterminat per a la majoria dels elements.
| Sub: | Alinea la línia base de l'element amb la línia base del subíndex del tipus de lletra de l'element pare.
| Super: | Alinea la línia base de l'element amb la línia base de superíndex del tipus de lletra de l'element pare.
| Superior: | Alineeu la part superior de l'element amb la part superior de l'element més alt de la línia dins del quadre de línia.
| Text superior: | Alinea la part superior de l'element amb la part superior del tipus de lletra de l'element pare.
| Mig: | Centra verticalment l'element respecte a l'element pare.
| A baix: | Alineeu la part inferior de l'element amb la part inferior de l'element més baix de la línia dins del quadre de línia.
| Text inferior: | Alineeu la part inferior de l'element amb la part inferior del tipus de lletra de l'element pare.
| Percentatge: | L'element s'alinea verticalment a un percentatge especificat de l'alçada de la línia. Per exemple, alineació vertical: el 50% centrarà l'element verticalment dins del seu element pare.
NOTA: Recordeu que 'alineació vertical' té el seu comportament específic en funció del tipus d'element i del context en què s'utilitza, de manera que els seus efectes poden no ser sempre senzills. És especialment útil per alinear elements en línia amb text o altres elements en línia.
Exemples
Aquí hi ha alguns detalls i exemples més relacionats amb la propietat 'alineació vertical' a CSS:
1. Alineació de la línia de base:
Línia de base Un altre text
2. Subíndex i superíndex:
| L'alineació vertical: | El subvalor alinea la línia base de l'element amb la línia base del subíndex del tipus de lletra de l'element pare, fent-lo aparèixer com a subíndex. Per altra banda,
| alineació vertical: | Super alinea la línia de base de l'element amb la línia de base de superíndex del tipus de lletra de l'element pare.
H2O és aigua. x2+ i2= r2
3. Alineació superior i inferior:
| L'alineació vertical: | El valor superior alinea la part superior de l'element amb la part superior de l'element més alt de la línia dins del quadre de línia. De la mateixa manera,
| alineació vertical: | La part inferior alinea la part inferior de l'element amb la part inferior de l'element més baix de la línia dins del quadre de línia.
Alineat a la part superior Alineat a la part inferior
4. Alineació mitjana:
| L'alineació vertical: | El valor mitjà centra verticalment l'element respecte a l'element pare. Sovint s'utilitza per centrar icones o imatges dins del text.
Aquesta icona està centrada verticalment 
5. Alineació text-superior i text-inferior:
| L'alineació vertical: | El valor text-top alinea la part superior de l'element amb la part superior del tipus de lletra de l'element pare i
| alineació vertical: | Text-bottom alinea la part inferior de l'element amb la part inferior del tipus de lletra de l'element pare.
Text alineat a la part superior Text alineat a la part inferior
6. Percentatge d'alineació:
L'ús d'un valor percentual amb alineació vertical us permet alinear l'element verticalment a un percentatge d'alçada de línia específic. Per exemple, alineació vertical: el 50% centrarà l'element a la meitat de l'alçada de la línia.
Centrat Verticalment
7. Centratge vertical d'elements a nivell de bloc:
Per centrar verticalment un element a nivell de bloc dins del seu pare, podeu utilitzar el disseny de quadrícula o flexbox.
Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 8. Centrat vertical amb alçada d'element desconeguda:
Si no coneixeu l'alçada de l'element que voleu centrar verticalment, podeu utilitzar una combinació de posició i transformació:
html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 9. Centrat vertical amb text de diverses línies:
Per centrar verticalment text de diverses línies dins d'un contenidor, podeu utilitzar una combinació de flexbox i un pseudoelement:
html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: ''; display: inline-block; vertical-align: middle; height: 100%; } 10. Centrat vertical d'imatges en un contenidor amb diferents relacions d'aspecte:
Si teniu imatges de diverses relacions d'aspecte que voleu centrar dins d'un contenidor, podeu utilitzar una combinació de flexbox i object-fit:
HTML:
<img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2">
CSS:
.parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 11. Combinant l'alineació vertical amb l'alçada de la línia:
Podeu combinar la propietat vertical-align amb la propietat line-height per aconseguir una alineació vertical més precisa, especialment amb mides de lletra més grans.
.element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 12. Ús de la propietat de la pantalla per a l'alineació:
Tot i que l'alineació vertical funciona principalment amb elements de nivell en línia, podeu modificar la propietat de visualització per aconseguir l'alineació vertical per als elements de nivell de bloc en contextos específics.
.container { display: table-cell; vertical-align: middle; } 13. Alineació vertical en taules:
La propietat d'alineació vertical s'utilitza sovint a les cel·les de la taula (
) per controlar l'alineació del contingut dins de les cel·les. | actriu de cinema rekha
td { vertical-align: middle; } 14. Alineació d'elements de bloc en línia:
Podeu utilitzar l'alineació vertical per alinear elements de bloc en línia dins d'una línia de text, per exemple, icones al costat del text.
<span>⭐</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } Aquests són només alguns exemples de la gestió de l'alineació vertical en diferents escenaris. Depenent de la vostra disposició i requisits específics, és possible que hàgiu d'adaptar o combinar aquestes tècniques per aconseguir els resultats desitjats. CSS proporciona diverses eines per gestionar l'alineació vertical de manera eficaç en diversos contextos.
Recordeu que, tot i que la propietat d'alineació vertical té usos, existeixen solucions més completes per a tots els escenaris d'alineació, especialment els elements a nivell de bloc. Per a dissenys i requisits d'alineació més complexos, es recomana explorar tècniques de disseny CSS modernes com Flexbox, CSS Grid o fins i tot valors de posició CSS (com ara absoluts i relatius) per aconseguir els resultats desitjats de manera més eficaç i previsible.
Recordeu que 'alineació vertical' només afecta els elements de nivell en línia o les cel·les de la taula. Utilitzeu tècniques com flexbox, disseny de quadrícula o posicionament per alinear els elements a nivell de bloc verticalment.
Pocs exemples més
table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> Prova-ho ara Sortida
Ara, hi ha un altre exemple en què estem alineant el text amb la imatge.
Exemple
div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. Prova-ho ara Sortida
Avantatges de l'alineació vertical en CSS
| Fàcil d'utilitzar per a elements en línia: | La propietat d'alineació vertical és senzilla per alinear elements, com ara imatges, icones o text, dins d'una línia de text o d'altres elements.
| Suport ampli del navegador: | La propietat d'alineació vertical té un bon suport del navegador i és àmpliament compatible amb diferents navegadors.
| Múltiples opcions d'alineació: | Proporciona diverses opcions d'alineació, com ara la línia de base, el mig, la part superior, la inferior, la part superior de text, la part inferior de text, el subíndex i el superíndex, donant flexibilitat als desenvolupadors per alinear els elements en funció dels seus requisits.
| Alineació sensible: | Es pot utilitzar en disseny responsive per adaptar l'alineació vertical en funció de la mida del contenidor o de l'espai disponible.
| Simplicitat per als elements en línia: | Per alinear elements petits com icones o imatges dins d'una línia de text, la propietat d'alineació vertical proporciona una solució relativament senzilla sense requerir tècniques de disseny complexes.
| Ajustament: | La propietat permet ajustar la posició vertical dels elements, cosa que pot ser útil per assolir objectius de disseny específics.
| Coherència amb les cel·les de la taula: | En el context de les taules, la propietat vertical-align controla l'alineació del contingut dins de les cel·les de la taula. Això pot ajudar a mantenir la coherència en els dissenys basats en taules.
| Combinació amb text: | Alinea de manera efectiva els elements amb el contingut del text, com ara l'alineació d'icones o etiquetes en línia amb text adjacent.
| Manteniment de les relacions d'aspecte: | Quan s'alineen imatges o icones dins d'una línia de text, l'alineació vertical pot ajudar a mantenir la relació d'aspecte d'aquests elements, especialment quan es combina amb mides de lletra i alçades de línia adequades.
| Correccions d'alineació ràpida: | Quan necessiteu solucions ràpides per a problemes d'alineació vertical, especialment en escenaris amb contingut mixt, l'alineació vertical pot proporcionar una solució ràpida sense requerir una reestructuració àmplia del disseny.
| Estil de correu electrònic CSS: | En els correus electrònics HTML, on els dissenys complexos s'han d'admetre millor, l'ús de l'alineació vertical pot ser útil per a l'alineació vertical bàsica dels elements sense dependre de fulls d'estil externs o tècniques complexes.
| Compatible amb pantalla: | bloc en línia: la propietat d'alineació vertical és compatible amb els elements de bloc en línia, la qual cosa permet una fàcil alineació vertical d'aquests elements dins d'una línia.
| Mantenir la coherència: | Per als elements que formen part de dades tabulars o s'han d'alinear amb elements similars en diferents files o columnes, l'alineació vertical pot ajudar a mantenir la coherència visual.
| Compatibilitat del navegador: | A diferència d'algunes tècniques CSS més noves, l'alineació vertical forma part de CSS durant molt de temps i gaudeix d'una bona compatibilitat entre navegadors.
Desavantatges de l'alineació vertical en CSS
| Limitat als elements en línia: | La limitació més significativa de la propietat d'alineació vertical és que només funciona per a elements de nivell en línia o cel·les de taula. No s'aplica directament als elements a nivell de bloc. Això pot fer que l'alineació vertical sigui més difícil per a elements més grans o dissenys complexos.
| Comportament inconsistent: | L'alineació vertical pot ser complicada i inconsistent, especialment amb diferents mides de lletra, alçades de línia i elements imbricats. El mateix valor d'alineació vertical pot produir resultats diferents segons el context.
| Característiques del navegador: | Alguns navegadors antics poden tenir interpretacions inconsistents o peculiaritats amb la propietat d'alineació vertical, cosa que pot donar lloc a resultats inesperats. Tanmateix, aquest problema ha millorat amb l'avenç dels navegadors moderns.
| Control limitat sobre l'espaiat: | La propietat d'alineació vertical s'ocupa principalment de l'alineació dels elements verticalment, però només ofereix un petit control sobre l'espaiat entre els elements. Ajustar l'espaiat sovint requereix modificacions addicionals de CSS o HTML.
| Flexbox i Grid com a alternatives: | Per a requisits de disseny més complexos i alineació vertical dels elements a nivell de bloc, els desenvolupadors sovint confien en Flexbox o CSS Grid, que proporcionen solucions més robustes i predictibles.
| No apte per a centrat complet: | Tot i que l'alineació vertical és útil per alinear verticalment elements en línia, és adequada per a elements de nivell de bloc de centratge total (horitzontal i vertical) amb tècniques CSS addicionals.
| Nom enganyós: | El nom 'alineació vertical' pot ser enganyós perquè no alinea l'element verticalment de la manera que sovint esperen els desenvolupadors. En canvi, controla l'alineació del contingut de l'element dins del seu quadre de línia.
| Complexitat amb diferents tipus de lletra: | El comportament de l'alineació vertical pot ser impredictible quan es tracta d'elements de diferents mides de lletra i alçades de línia. Això pot dificultar l'alineació vertical consistent.
| Limitat per a dissenys complexos: | No és adequat per a dissenys complexos o escenaris en què heu d'alinear verticalment elements més grans a nivell de bloc dins d'un contenidor principal.
| Compatibilitat entre navegadors: | Tot i que els navegadors moderns han millorat la compatibilitat amb l'alineació vertical, els navegadors antics encara poden presentar inconsistències o comportaments inesperats.
| Tècniques alternatives: | Les tècniques de disseny CSS modernes com Flexbox i CSS Grid ofereixen maneres més potents i predictibles de gestionar els requisits de disseny complexos, inclosa l'alineació vertical d'elements en línia i a nivell de bloc.
| Consideracions d'accessibilitat: | L'ús de l'alineació vertical per al disseny pot no ser l'enfocament més accessible, ja que podria interferir amb els lectors de pantalla i altres tecnologies d'assistència. L'HTML semàntic i les tècniques CSS adequades solen ser millors opcions per a l'accessibilitat.
| Reptes de depuració: | Depurar problemes de comportament inesperat o d'alineació relacionats amb l'alineació vertical de vegades pot ser complicat, especialment quan es tracta d'elements imbricats i de diferents mides de lletra.
| Evolució del disseny web: | A mesura que el panorama del desenvolupament web evoluciona, les noves tècniques de disseny com CSS Grid Layout i Flexbox proporcionen solucions més modernes i completes per als reptes de disseny, la qual cosa pot fer que l'alineació vertical sigui menys rellevant per a molts escenaris.
En general, tot i que la propietat d'alineació vertical és útil per alinear elements en línia o cel·les de taula dins d'una línia de text, els desenvolupadors sovint necessiten altres tècniques CSS per a requisits de disseny i posicionament més avançats, especialment quan es tracten amb elements a nivell de bloc o dissenys complexos. CSS Flexbox i CSS Grid són alternatives potents per a una alineació i un control de posicionament més amplis.
Conclusió
La propietat vertical-align és útil per alinear elements en línia dins de cel·les de text o de taula. Tanmateix, té limitacions i pot ser difícil d'utilitzar amb eficàcia per a dissenys complexos o elements a nivell de bloc. Els desenvolupadors haurien de considerar tècniques de disseny CSS modernes que proporcionin més control i flexibilitat sobre l'alineació i el posicionament.
