Értékek
A következő értékek mindegyikére alkalmazzuk a listaelem sormezőjében lévő belső képre. Az egyes képek vonaldobozának pontozott szürke szegélye van. Az a kép, amely az egyes értékekhez igazítja a képeket, piros.
alapvonal Ez az alapértelmezett érték. Igazítja az elem alapvonalát a vonalbázis alapvonalához. Ha az elemnek nincs alapvonala, akkor igazítja az alsó margó szélét a vonal alapvonalához.
középre igazítja az elem függőleges középpontját a vonal alapvonalához plusz a vonal x-magasságának a feléhez (amelyet a font).
Ez az egyik leggyakrabban használt érték a vertical-align tulajdonság, és általában arra használják, hogy az ikonokat és a jelölőket a sorban lévő szöveghez igazítsa.
sub Csökkenti az elem alapvonalát az előfizetők megfelelő helyzetére a vonalon. (Ez az érték nincs hatással az elem szövegének betűméretére.)
super Az elem alapvonalát a vonalon lévő felső indexek megfelelő helyzetébe emeli. (Ez az érték nincs hatással az elem szövegének betűméretére.)
text-top Az elem tetejét a vonal tartalmi területének tetejéhez igazítja. A tartalmi terület magassága éppen elég magas a sorban található összes betű maximális emelkedőjének és leszármazottjának, és az igazítási vonal ennek a magasságnak a teteje. Vegye figyelembe, hogy a magasság nagyobb lehet, mint bármelyik betűméret, a betűtípusok alapvonalbeli beállításától függően.
text-bottom Az elem alját az aljához igazítja. a vonal tartalmi területét. A tartalmi terület magassága éppen elég magas a sorban található összes betű maximális leszármazóinak és emelkedőinek, és az igazítási vonal ennek a magasságnak az alja. Ne feledje, hogy a magasság nagyobb lehet, mint bármelyik betűméret, a betűtípusok alapvonalbeli beállításától függően.
top Az elem tetejét a betű tetejéhez igazítja. egész sor. Ez azt jelenti, hogy ha a vonalon más, különböző magasságú elemek vannak, például több kép, akkor a vonal teteje olyan magas lesz, mint a két kép közül a legmagasabb.
Ha a sor kifejezetten line-height, amely magasabb, mint a sor legmagasabb tartalma, a sor mezőjének tetejét ez a magasság határozza meg.
bottom
line-height, a sor mező alját a betű legalacsonyabb leszármazói határozzák meg ebben a példában, így az eredmény hasonlít a text-bottom. Az elemet az egész sor aljára igazítja.
Ha a sor kifejezetten beállított line-height amely alacsonyabb, mint a vonal legalacsonyabb tartalma, a sor mező alját ez a magasság határozza meg.
line-height sorral, amely lefelé húzza a vonal alját, és a kép igazodik az aljához.
< százalékos > Emelje az elemet az alapvonal fölé (ha a százalékos érték pozitív), vagy engedje le az alábbi elemet az alapvonal (ha a százalékos érték negatív) a megadott összeggel. A megadott összeg aline-heightérték százalékos aránya. A0%érték ugyanazt jelenti, mint abaseline.
line-height 100px, ezért a képet 50px-rel emelik az alapvonal fölé. < length > Emelje az elemet az alapvonal fölé (ha a hosszúság értéke pozitív), vagy engedje le az elemet az alapvonal alá (ha a hosszúság értéke negatív) a megadott összeggel. A „0” érték ugyanazt jelenti, mintbaseline.
Megjegyzések
Az , bottom és middle a várt módon viselkedik, ha a táblázat-cellák elemeire alkalmazzák őket. Egyes böngészőkben azonban más értékek váratlanul viselkedhetnek. Chris Coyier mondja a legjobban:
Ha a függőleges-igazítás funkciót használja az asztal celláin, akkor a legjobb, ha a felső, az alsó és a középső ponttal ragaszkodik. A többi érték közül egyiknek sincs sok értelme amúgy, és kiszámíthatatlan a böngésző közötti eredmény. Például, ha egy cellát text-bottom-re állít, a szöveget az IE 6 aljára, a Safari 4-ben pedig a tetejére igazítja. Ha sub-re állítja, a középső igazítás az IE 6-ban és a felső a Safari 4-ben történik.
A táblázat celláinak alapértelmezett függőleges igazítása (<td>) middle. A blokkszintű elem alapértelmezett függőleges igazítása, amelynek display: table-cell van, továbbra is top, amely a blokkszint alapértelmezett igazítása konténerek általában. Élő példát az alábbi bemutató részben talál.
