Værdier
For hver af de følgende værdier anvender vi det på et indbygget billede inde i en linjeboks af et listeelement. Linjefeltet i hvert af billederne har en stiplet grå kant. Den linje, der bruges til at justere billederne for hver værdi, er rød.
baseline Dette er standardværdien. Det justerer elementets basislinie med linjeboksens baseline. Hvis elementet ikke har en baseline, justerer den nederste margenkant med linjens baseline.
midten Justerer det lodrette midtpunkt for elementet med linjens basislinje plus halv linjens x-højde (bestemt af font).
Dette er en af de mest anvendte værdier for vertical-align egenskab og bruges normalt til at justere ikoner og listemarkører med teksten i linjen.
sub Sænker elementets basislinje til den rette position for abonnementer på linjen. (Denne værdi har ingen indflydelse på skriftstørrelsen på elementets tekst.)
super Hæver elementets basislinje til den rette position for overskrifter på linjen. (Denne værdi har ingen indflydelse på skrifttypestørrelsen på elementets tekst.)
tekst-top Justerer toppen af elementet med toppen af linjens indholdsområde. Indholdsområdets højde er lige høj nok til de maksimale stigninger og nedstigninger af alle skrifttyperne i linjen, og justeringslinjen er toppen af denne højde. Bemærk, at højden kan være større end nogen af de involverede skrifttypestørrelser, afhængigt af skrifttypens basisliniejustering.
text-bund Justerer bunden af elementet med bunden af linjens indholdsområde. Højden af indholdsområdet er lige høj nok til at maksimere nedstigninger og stigninger for alle skrifttyperne i linjen, og justeringslinjen er bunden af denne højde. Bemærk, at højden kan være større end nogen af de involverede skrifttypestørrelser, afhængigt af skrifttypens baselinejustering.
top Justerer toppen af elementet med toppen af hele linjen. Det betyder, at hvis der er andre elementer på linjen, der hver har forskellige højder, f.eks. Flere billeder, vil toppen af linjen være så høj som den højeste af de to billeder.
Hvis linjen har et eksplicit sæt line-height der er højere end det højeste indhold på linjen, vil toppen af linjeboksen derefter blive bestemt af den højde.
bund
line-height, bestemmes bunden af linjefeltet af de laveste nedstigninger af skrifttypen i dette eksempel, så resultatet ligner det, vi fik ved at bruge text-bottom. Justerer elementet til bunden af hele linjen.
Hvis linjen har et eksplicit sæt line-height der er lavere end det laveste indhold på linjen, vil bunden af linjeboksen derefter blive bestemt af den højde.
line-height, der strækker bunden af linjen nedad, og billedet er justeret med den nederste.
< procent > Hæv elementet over basislinjen (hvis procentværdien er positiv), eller sænk elementet nedenfor basislinjen (hvis procentværdien er negativ) med det angivne beløb. Det angivne beløb er en procentdel af værdienline-height. Værdien0%betyder det samme sombaseline.
line-height er 100px, så billedet løftes 50px over basislinjen. < længde > Løft elementet over basislinjen (hvis længdeværdien er positiv), eller sænk elementet under basislinjen (hvis længdeværdien er negativ) med det angivne beløb. En værdi ‘0’ betyder det samme sombaseline.
Noter
Værdierne top, bottom og middle opfører sig som forventet, når de anvendes på tabelcelleelementer. Andre værdier kan dog have uventet adfærd i nogle browsere. Chris Coyier siger det bedst:
Når du bruger lodret justering på bordceller, er det bedst at holde fast med top, bund og midten. Ingen af de andre værdier giver alligevel meget mening og har uforudsigelige resultater på tværs af browsere. Hvis du f.eks. Indstiller en celle til tekstbund, justeres teksten til bunden i IE 6 og øverst i Safari 4. Hvis den indstilles til under, forårsager den midterste justering i IE 6 og øverst i Safari 4.
Den lodrette standardjustering for tabelceller (<td>) er middle. Den lodrette standardjustering for et element på blokniveau, der har display: table-cell, er dog stadig top, hvilket er standardjusteringen for blokniveau containere generelt. Se demo-sektionen nedenfor for et liveeksempel.
