Valori

Pentru fiecare dintre următoarele valori, îl vom aplica unei imagini în linie dintr-o casetă de linie a unui element din listă. Caseta de linie din fiecare dintre imagini are o margine gri punctată. Linia utilizată pentru alinierea imaginilor pentru fiecare valoare este roșie.

linia de bază Aceasta este valoarea implicită. Se aliniază linia de bază a elementului cu linia de bază a casetei de linie. Dacă elementul nu are o linie de bază, acesta aliniază marginea inferioară a marginii cu linia de bază a liniei.

mijloc Aliniază punctul mediu vertical al elementului cu linia de bază a liniei plus jumătate din înălțimea x a liniei (determinată de font).

Aceasta este una dintre cele mai utilizate valori pentru vertical-align proprietate și este de obicei folosit pentru a alinia pictogramele și marcajele de listă cu textul în linie.

sub Reduce linia de bază a elementului la poziția corectă pentru indicii de pe linie. (Această valoare nu are efect asupra dimensiunii fontului textului elementului.)

super Ridică linia de bază a elementului în poziția corectă pentru superindici pe linie. (Această valoare nu are niciun efect asupra dimensiunii fontului textului elementului.)

text-top Aliniază partea de sus a elementului cu partea de sus a zonei de conținut a liniei. Înălțimea zonei de conținut este suficient de mare pentru ascendenții și descendenții maximi ai tuturor fonturilor din linie, iar linia de aliniere este partea de sus a înălțimii respective. Rețineți că înălțimea poate fi mai mare decât oricare dintre dimensiunile fontului implicate, în funcție de alinierea de bază a fonturilor.

text-bottom Aliniază partea de jos a elementului cu partea de jos a zonei de conținut a liniei. Înălțimea zonei de conținut este suficient de mare pentru descendenții și ascendenții maximi ai tuturor fonturilor din linie, iar linia de aliniere este partea inferioară a acelei înălțimi. Rețineți că înălțimea poate fi mai mare decât oricare dintre dimensiunile fonturilor implicate, în funcție de alinierea de bază a fonturilor.

top Aliniază partea de sus a elementului cu partea de sus a întreaga linie. Aceasta înseamnă că, dacă există alte elemente pe fiecare linie cu înălțimi diferite, cum ar fi mai multe imagini, de exemplu, partea de sus a liniei va fi la fel de înaltă ca cea mai înaltă dintre cele două imagini.

Dacă linia are un set explicit line-height care este mai mare decât cel mai mare conținut de pe linie, partea de sus a casetei de linie va fi apoi determinată de înălțimea respectivă.

jos

Aliniază elementul la partea de jos a întregii linii.

Dacă linia are un set line-height care este mai mic decât cel mai mic conținut de pe linie, partea de jos a casetei de linie va fi apoi determinată de înălțimea respectivă.

< procentaj > Ridicați elementul deasupra liniei de bază (dacă valoarea procentuală este pozitivă) sau coborâți elementul de mai jos linia de bază (dacă valoarea procentuală este negativă) cu suma specificată. Suma specificată este un procent din valoarealine-height. Valoarea0%înseamnă aceeași cabaseline.

< lungime > Ridicați elementul deasupra liniei de bază (dacă valoarea lungimii este pozitivă) sau coborâți elementul sub linia de bază (dacă valoarea lungimii este negativă) cu suma specificată. O valoare „0” înseamnă aceeași cabaseline.

Note

Valorile top, bottom și middle se comportă așa cum era de așteptat atunci când sunt aplicate elementelor tabelelor-celule. Cu toate acestea, alte valori pot avea un comportament neașteptat în unele browsere. Chris Coyier spune cel mai bine:

Când utilizați alinierea verticală pe celulele de masă, lipirea cu partea de sus, de jos și de mijloc este cel mai bun pariu. Niciuna dintre celelalte valori nu are un sens oricum și are rezultate imprevizibile ale browserului încrucișat. De exemplu, setarea unei celule la text-jos aliniază textul la partea de jos în IE 6 și la partea de sus în Safari 4. Setarea acesteia la sub provoacă alinierea mijlocie în IE 6 și partea de sus în Safari 4.

Alinierea verticală implicită pentru celulele tabelului (<td>) este middle. Cu toate acestea, alinierea verticală implicită pentru un element la nivel de bloc care are display: table-cell este în continuare top, care este alinierea implicită pentru nivelul de bloc containere în general. Consultați secțiunea demonstrativă de mai jos pentru un exemplu live.