CSS vertikalno poravnanje
Vertikalno poravnanje se često upotrebljava na pogrešan način.
| vertical-align | Podešavanje poravnanja / centriranja po vertikali. |
Ovaj atribut definiše dva potpuno različita ponašanja, zavisno od toga na kakvom elementu se primenjuje (inline-elementi ili ćelije tabele).
vertical-align: middle;
Ćelije tabele
Kada se atribut primenjuje na ćelijama tabele, odnosi se na poravnanje sadržaja unutar tabele. Moguće vrednosti su:
- top - poravananje prema vrhu
- middle - vertikalno centriranje
- bottom - poravananje prema dnu
Ćelije tabele
td {
vertical-align: middle;
}
Inline elementi
Kada se atribut primenjuje na inline elemente, odnosi se na poravnanje celog elementa u odnosu na osnovnu liniju teksta nadređenog elementa. Moguće vrednosti su:
- top - poravananje prema vrhu linije
- middle - vertikalno centriranje
- bottom - poravananje prema dnu linije
- baseline - poravananje prema osnovnoj liniji ispisa teksta
- sub - postavljanje elementa u indeks - subscript
- super - postavljanje elementa u eksponent - superscript
- text-top - vrh poravnatog elementa se poravnava prema vrhu teksta
- text-bottom - dno poravnatog elementa se poravnava prema dnu teksta
- metrika - element se pozicionira na zadato rastojanje iznad osnovne linije (pozitivne vrednosti) odnosno ispod (negativne vrednosti)
- procenat - isto kao metrika, procenat od visine linije (line-height)
vertical-align: super;
vertical-align: 4px;
vertical-align: -20%;
Inline elementi
div {
display: inline-block;
vertical-align: text-bottom;
}
U primeru je zadata podvučena linija teksta (da bi se videla osnovna linija nadređenog elementa) i sa veoma povećanom visinom linije da bi se videlo ponašanje inline elemenata. Vidi se da je baseline podešavanje ustvari default ponašanje elemenata (poravananje prema osnovnoj liniji teksta). Podešavanja text-top i text-bottom se ponašaju kako je opisano. Podešavanje top će poravnati vrh elementa sa vrhom linije, middle će smestiti element na sredinu linije, dok će bottom poravnati dno elementa sa dnom linije.