Verdier
For hver av de følgende verdiene vil vi bruke den på et innebygd bilde i en linjeboks av et listeelement. Linjeboksen i hvert av bildene har en stiplet grå kant. Linjen som brukes til å justere bildene for hver verdi er rød.
baseline Dette er standardverdien. Den justerer grunnlinjen til elementet med grunnlinjen til linjeboksen. Hvis elementet ikke har en grunnlinje, justerer den nederste marginkant med linjens grunnlinje.
midt Justerer det vertikale midtpunktet til elementet med linjens grunnlinje pluss halv x-høyden på linjen (bestemt av font).
Dette er en av de mest brukte verdiene for vertical-align
egenskap, og brukes vanligvis til å justere ikoner og listemarkører med teksten i linjen.
sub Senker grunnlinjen til elementet til riktig posisjon for abonnement på linjen. (Denne verdien har ingen innvirkning på skriftstørrelsen til elementets tekst.)
super Hever grunnlinjen til elementet til riktig posisjon for overskrift på linjen. (Denne verdien har ingen innvirkning på skriftstørrelsen til elementets tekst.)
tekst-topp Justerer toppen av elementet med toppen av linjens innholdsområde. Høyden på innholdsområdet er akkurat høy nok til maksimalt stigning og nedstigning for alle skriftene i linjen, og justeringslinjen er toppen av den høyden. Vær oppmerksom på at høyden kan være større enn noen av de involverte skriftstørrelsene, avhengig av skriftlinjens basisjustering.
text-bottom Justerer bunnen av elementet med bunnen av linjens innholdsområde. Høyden på innholdsområdet er akkurat høy nok til å maksimere nedstigninger og stigninger på alle skriftene i linjen, og justeringslinjen er bunnen av den høyden. Vær oppmerksom på at høyden kan være større enn noen av de involverte skriftstørrelsene, avhengig av skriftlinjens basisjustering.
topp Justerer toppen av elementet med toppen av hele linjen. Dette betyr at hvis det er andre elementer på linjen med hver sin høyde, som for eksempel flere bilder, vil toppen av linjen være så høy som den høyeste av de to bildene.
Hvis linjen har et eksplisitt sett line-height
som er høyere enn det høyeste innholdet på linjen, vil toppen av linjeboksen da bli bestemt av den høyden.
bunn
Justerer elementet til bunnen av hele linjen.
Hvis linjen har et eksplisitt sett line-height
som er lavere enn det laveste innholdet på linjen, vil bunnen av linjeboksen da bli bestemt av den høyden.
< prosent > Hev elementet over grunnlinjen (hvis prosentverdien er positiv), eller senk elementet under grunnlinjen (hvis prosentverdien er negativ) med det angitte beløpet. Beløpet som er angitt er en prosentandel avline-height
-verdien. Verdien0%
betyr det samme sombaseline
.
< lengde > Løft elementet over grunnlinjen (hvis lengdeverdien er positiv), eller senk elementet under grunnlinjen (hvis lengdeverdien er negativ) med spesifisert beløp. Verdien ‘0’ betyr det samme sombaseline
.
Notater
Verdiene top
, bottom
og middle
oppfører seg som forventet når de brukes på tabellcelleelementer. Imidlertid kan andre verdier ha uventet oppførsel i noen nettlesere. Chris Coyier sier det best:
Når du bruker vertikaljustering på bordceller, er det best å holde fast med topp, bunn og midt. Ingen av de andre verdiene gir mye mening uansett, og har uforutsigbare resultater på tvers av nettlesere. Hvis du for eksempel setter en celle til tekstbunn, justeres teksten til bunnen i IE 6 og til toppen i Safari 4. Hvis du setter den til under, blir midtjustering i IE 6 og øverst i Safari 4.
Standard vertikal justering for tabellceller (<td>
) er middle
. Standard vertikal justering for et blokknivåelement som har display: table-cell
er imidlertid fortsatt top
, som er standardjusteringen for blokknivå containere generelt. Se demo-delen nedenfor for et live eksempel.