Web-elementtien sijoittaminen CSS-pystysuuntauksella

Google haku









Maisema
Kuvaus






Metsä

Lorem ipsum dolor sit amet.






valtameri

Lorem ipsum dolor sit amet.

The HTML-koodi yllä oleva luo yksinkertaisen verkkosivun, joka näyttää neljä elementtiä: linkitetyn tekstin, kuvan, upotetun videon ja taulukon. Sen pitäisi näyttää selaimessasi tältä:

Tekstin kohdistaminen pystysuunnassa

Oletuksena useimmat tekstielementit (kuten otsikot,

, ja

Kuitenkin jotkut tekstielementit, kuten ja tunniste ovat rivissä. Tämän seurauksena ne tukevat pystysuuntaista ominaisuutta. Tasaa teksti pystysuunnassa yksinkertaisesti määrittämällä sopiva arvo CSS: n pystysuoraan tasausominaisuuteen.

Pystytasauksen käyttäminen yläosan arvo tekstissä

a {
 pystysuuntaus: ylhäältä;
}

Lisäämällä CSS-koodi yläpuolella HTML-perusasiakirjaan tasaa yläreunan merkitse teksti rivin korkeimman elementin yläosaan. Tuottaa seuraavan päivitetyn näytön:

Prosenttiarvon käyttäminen tekstissä

a {
 pystysuuntaus: -50 %;
}

Yllä oleva CSS kohdistaa tekstielementin kohtaan, joka on 50 % pääelementin perusviivan alapuolella. Se tuottaa selaimessasi seuraavan tulosteen:

Kuten yllä olevasta kuvasta näkyy, tekstielementti sijaitsee samalla rivillä olevien kuva- ja videoelementtien alapuolella. Jos haluat sijoittaa tämän elementin perusviivalle tai sen yläpuolelle, käytä positiivista prosenttiarvoa.

Pituusarvon käyttäminen tekstissä

a {
 pystytasaus: 90px;
}

Yllä oleva koodi kohdistaa tekstielementin perusviivan 90 kuvapisteen pituiseksi pääelementin perusviivan yläpuolelle. Tämä tuottaa seuraavan tulosteen selaimessa:

Kuvien kohdistaminen pystysuunnassa

The tag on rivielementti, jonka kanssa CSS: n vertikaalinen tasausominaisuus toimii hyvin.

Pystysuuntaisen super-arvon käyttäminen kuvissa

img {
 pystysuuntaus: super;
}

Yllä oleva koodi sijoittaa kuvan pääelementin yläindeksin perusviivalle. Tämä tarkoittaa asemaa perusviivan yläpuolella, kuten voit nähdä seuraavasta lähdöstä:

Pystysuuntaisen prosenttiarvon käyttäminen kuvissa

img {
 pystysuuntaus: 25 %;
}

Yllä oleva koodi kohdistaa kuvaelementin perusviivan 25 % pääelementin perusviivan yläpuolelle. Tämä tuottaa seuraavan super-arvon peiliefektin:

Pystysuuntaisen pituusarvon käyttäminen kuvissa

img {
 pystytasaus: 5px;
}

Yllä oleva koodi kohdistaa kuvaelementin perusviivan kohtaan, joka on 5 kuvapistettä pääelementin perusviivan yläpuolella. Tämä tuottaa samanlaisen vaikutuksen kuin super- ja 25%-arvoilla:

Upotetut mediat, kuten videot ja iframe-kehykset, ovat upotettuja HTML-elementtejä. Siksi CSS: n pystysuoraan kohdistusominaisuus toimii hyvin niiden kanssa.

Pystysuuntaisen super-arvon käyttäminen videossa

video {
 pystysuuntaus: ala;
}

Yllä oleva koodi sijoittaa videon pääelementin alaindeksin perusviivalle. Tämä tarkoittaa asemaa perusviivan alapuolella, kuten näet seuraavasta tulosteesta:

Pystysuuntaisen prosenttiarvon käyttäminen videossa

video {
 pystytasaus: -25 %;
}

Yllä oleva koodi kohdistaa videoelementin perusviivan 25 % pääelementin perusviivan alapuolelle. Tämä tuottaa seuraavan aliarvon peiliefektin:

Pystysuuntaisen pituusarvon käyttäminen videossa

video {
 pystytasaus: -5px;
}

Yllä oleva koodi kohdistaa kuvaelementin perusviivan 5 kuvapistettä pääelementin perusviivan alapuolelle. Tämä tuottaa vaikutuksen, kuten ali- ja -25 %:n arvot:

Kohteiden kohdistaminen pystysuoraan taulukossa

Pystysuuntausominaisuuden käyttäminen taulukon kanssa on hieman hankalaa, koska taulukko on lohkoelementti. Kuitenkin

Pystytasauksen käyttäminen taulukon tietojen yläreunassa

td {
 korkeus: 40px;
 pystysuuntaus: ylhäältä;
}

Yllä oleva koodi lisää taulukon jokaiseen soluun 40 kuvapisteen korkeuden. Sitten se tasaa kunkin solun tiedot kunkin rivin yläosaan. Tämä tuottaa seuraavan tulosteen selaimessa:

Pystysuuntaisen keskiarvon käyttäminen taulukon tiedoissa

td {
 korkeus: 40px;
 pystysuuntaus: keskellä;
}

Yllä olevan koodin pystysuuntainen keskiarvo keskittää tiedot pystysuoraan jokaiseen soluun. Se tuottaa selaimessa seuraavan tulosteen:

Pystysuuntaisen alareunan arvon käyttäminen taulukon tiedoissa

td {
 korkeus: 40px;
 pystysuuntaus: alhaalla;
}

Yllä oleva koodi kohdistaa kunkin solun tiedot kunkin rivin alaosaan. Se tuottaa selaimessa seuraavan tulosteen:

Nyt voit kohdistaa Web-sivusi elementit

Voit nyt käyttää CSS: n pystytasausominaisuutta useiden eri rivien elementtien, kuten tekstin, upotetun median ja taulukkotietojen, kanssa. Yleissääntönä on, että pystysuoraan kohdistusominaisuus toimii vain upotetuissa ja rivin sisäisissä lohkoelementeissä.

Voit kuitenkin käyttää tätä ominaisuutta lohkoelementeissä, sinun on vain muutettava ne ensin rivi- tai rivi-lohkoelementeiksi. Muista, että voit yhdistää pystytasauksen muihin tasausominaisuuksiin, kuten tekstin tasaukseen.

Kirjailijasta

Kadeisha Kean (52 artikkelia julkaistu)

Kadeisha Kean on Full-Stack-ohjelmistokehittäjä ja tekninen/teknologiakirjoittaja. Hänellä on selkeä kyky yksinkertaistaa joitain monimutkaisimmista teknologisista käsitteistä; tuottaa materiaalia, jonka jokainen teknologia-aloittelija voi helposti ymmärtää. Hän on intohimoinen kirjoittamiseen, mielenkiintoisten ohjelmistojen kehittämiseen ja maailmalla matkustamiseen (dokumenttien kautta).

Lisää Kadeisha Keanilta