Arvot
Kullekin seuraavista arvoista käytämme sitä luettelokohteen rivikentän sisäiseen kuvaan. Jokaisen kuvan viivaruudussa on katkoviiva harmaa reunus. Kunkin arvon kuvien tasaamiseen käytetty viiva on punainen.
lähtötaso Tämä on oletusarvo. Se kohdistaa elementin perusviivan riviruudun perusviivan kanssa. Jos elementillä ei ole perusviivaa, se kohdistaa alamarginaalin reunan viivan perusviivan kanssa.
keskimmäinen Kohdistaa elementin pystysuoran keskipisteen viivan perusviivaan plus puolet viivan x-korkeudesta (määritetään font).
Tämä on yksi yleisimmin käytetyistä arvoista vertical-align ominaisuus, ja sitä käytetään yleensä kohdistamaan kuvakkeet ja luettelomerkit rivillä olevan tekstin kanssa.
sub Laske elementin perusviivan oikeaan tilaan rivillä oleville tilaajille. (Tällä arvolla ei ole vaikutusta elementin tekstin kirjasinkokoon.)
super Korottaa elementin perusviivan oikeaan kohtaan rivillä olevien alaindeksien kohdalla. (Tällä arvolla ei ole vaikutusta elementin tekstin kirjasinkokoon.)
text-top Kohdistaa elementin yläosan rivin sisältöalueen yläosaan. Sisältöalueen korkeus on juuri riittävän suuri kaikkien rivin fonttien nousijoille ja laskeutujille, ja kohdistusviiva on kyseisen korkeuden yläosa. Huomaa, että korkeus voi olla suurempi kuin mikä tahansa kirjasinkoko, fonttien perusviivan tasauksesta riippuen.
text-bottom Tasaa elementin pohjan alareunaan linjan sisältöalueesta. Sisältöalueen korkeus on juuri tarpeeksi kaikkien rivin fonttien enimmäislaskijoille ja nousijoille, ja kohdistusviiva on kyseisen korkeuden pohja. Huomaa, että korkeus voi olla suurempi kuin mikä tahansa kirjasinkoko, fonttien perusviivan tasauksesta riippuen.
alkuun Tasaa elementin yläosan kirjasimen yläosaan. koko linja. Tämä tarkoittaa, että jos viivalla on muita elementtejä, joilla on erilainen korkeus, kuten useita kuvia, esimerkiksi rivin yläosa on yhtä korkea kuin korkein kahdesta kuvasta.
Jos rivillä on nimenomaisesti asetettu line-height, joka on korkeampi kuin rivin korkein sisältö, rivikentän yläosa määritetään sitten kyseisen korkeuden perusteella.
bottom
line-height ei määritetä, riviruudun alaosan määrittävät tämän esimerkin fontin alimmat jälkeläiset, joten tulos näyttää samankaltaiselta kuin saimme käyttämällä text-bottom. Kohdistaa elementin koko rivin alareunaan.
Jos rivillä on nimenomaisesti asetettu line-height, joka on pienempi kuin rivin alin sisältö, rivikentän alaosa määritetään sitten kyseisen korkeuden perusteella.
line-height, joka venyttää rivin alaosaa alaspäin, ja kuva on kohdistettu kyseisen pohjan kanssa.
< prosenttiosuus > Nosta elementti perusviivan yläpuolelle (jos prosenttiosuus on positiivinen) tai laske alla olevaa elementtiä lähtötaso (jos prosentuaalinen arvo on negatiivinen) määritetyllä määrällä. Määritetty määrä on prosenttiosuusline-height-arvosta. Arvo0%tarkoittaa samaa kuinbaseline.
line-height on 100 kuvapistettä, joten kuvaa nostetaan 50 kuvapistettä perusviivan yläpuolelle. < length > Nosta elementti perusviivan yläpuolelle (jos pituusarvo on positiivinen) tai laske elementti perusviivan alle (jos pituusarvo on negatiivinen) määritetyllä määrällä. Arvo ’0’ tarkoittaa samaa kuinbaseline.
Huomautuksia
Arvot top, bottom ja middle käyttäytyvät odotetusti sovellettaessa taulukon soluelementteihin. Muilla arvoilla voi kuitenkin olla odottamaton käyttäytyminen joissakin selaimissa. Chris Coyier sanoo sen parhaiten:
Kun käytät pystysuuntaista tasausta taulukon soluissa, paras tarttuminen ylä-, ala- ja keskiosiin on paras vaihtoehto. Mikään muusta arvosta ei ole muutenkin järkevää, ja sillä on arvaamattomia selaintuloksia. Esimerkiksi asettamalla solun tekstin alaosaan teksti kohdistetaan IE 6: n alareunaan ja Safari 4: n yläosaan. Jos se asetetaan alaosaksi, IE 6: n ja Safari 4: n yläreunaan kohdistetaan.
Taulukon solujen (<td>) oletussuuntainen pystysuuntainen tasaus on middle. Lohkotason elementin, jolla on display: table-cell, oletus pystysuuntainen tasaus on kuitenkin edelleen top, joka on lohkotason oletusarvo. kontit yleensä. Katso live-esimerkki alla olevasta esittelyosiosta.
