Kuidas positsioneerida veebielemente CSS-i vertikaalse joondamise abil

Google otsing









Maastik
Kirjeldus






Mets

Lorem ipsum dolor sit amet.






Ookean

Lorem ipsum dolor sit amet.

The HTML kood loob lihtsa veebilehe, millel on neli elementi: lingitud tekst, pilt, manustatud video ja tabel. See peaks teie brauseris välja nägema järgmine:

Kuidas teksti vertikaalselt joondada

Vaikimisi on enamik tekstielemente (nt pealkirjad,

, ja

Kuid mõned tekstielemendid, näiteks ja silt on sees. Selle tulemusena toetavad need vertikaalse joondamise omadust. Teksti vertikaalseks joondamiseks määrake lihtsalt CSS-i vertikaalse joondamise atribuudile sobiv väärtus.

Vertikaalse joonduse kasutamine teksti ülemises väärtuses

a {
 vertikaalne joondamine: ülemine;
}

Lisades CSS-kood HTML-dokumendi kohal, joondab ülaosa sildi teksti rea kõrgeima elemendi ülaosaga. Järgmise uuendatud ekraani tootmine:

Teksti protsendiväärtuse kasutamine

a {
 vertikaalne joondus: -50%;
}

Ülaltoodud CSS joondab tekstielemendi positsioonile, mis on 50% põhielemendi baasjoonest allpool. See toodab teie brauseris järgmise väljundi:

Nagu näete ülaloleval pildil, asub tekstielement pildi- ja videoelementide all, mis asuvad samal real. Selle elemendi paigutamiseks baasjoonele või sellest kõrgemale kasutage positiivset protsendiväärtust.

Pikkusväärtuse kasutamine tekstis

a {
 vertikaalne joondus: 90 pikslit;
}

Ülaltoodud kood joondab tekstielemendi lähtejoone 90 piksli pikkusega ülemelemendi lähtejoonest. See annab brauseris järgmise väljundi:

Kuidas pilte vertikaalselt joondada

The silt on tekstisisene element, millega CSS-i vertikaalse joondamise atribuut töötab hästi.

Vertikaalse joonduse superväärtuse kasutamine piltidel

img {
 vertikaalne joondamine: super;
}

Ülaltoodud kood asetab pildi lähteelemendi ülaindeksi baasjoonele. See tähendab lähtejoonest kõrgemal asuvas asendis, nagu näete järgmises väljundis:

Vertikaalse joonduse protsendiväärtuse kasutamine piltidel

img {
 vertikaalne joondus: 25%;
}

Ülaltoodud kood joondab pildielemendi lähtejoone 25% kõrgemale emaelemendi lähtejoonest. See tekitab järgmise superväärtuse peegelefekti:

Vertikaalse joonduse pikkuse väärtuse kasutamine piltidel

img {
 vertikaalne joondus: 5 pikslit;
}

Ülaltoodud kood joondab pildielemendi lähtejoone positsioonile, mis on 5 pikslit ülemelemendi lähtejoonest kõrgemal. See annab super- ja 25% väärtustele sarnase efekti:

Manustatud meediumid, nagu videod ja iframe'id, on tekstisisesed HTML-elemendid. Seetõttu töötab CSS-i vertikaalse joondamise atribuut nendega suurepäraselt.

Vertikaalse joonduse superväärtuse kasutamine videol

video {
 vertikaalne joondamine: alam;
}

Ülaltoodud kood asetab video ülemelemendi alamindeksi baasjoonele. See tähendab baasjoonest madalamal positsioonil, nagu näete järgmises väljundis:

Vertikaalse joonduse protsendiväärtuse kasutamine videol

video {
 vertikaalne joondus: -25%;
}

Ülaltoodud kood joondab videoelemendi lähtejoone 25% põhielemendi baasjoonest allapoole. See loob alamväärtuse järgmise peegelefekti:

Vertikaalse joonduse pikkuse väärtuse kasutamine videol

video {
 vertikaalne joondus: -5 pikslit;
}

Ülaltoodud kood joondab kujutise elemendi baasjoone positsioonile, mis on 5 pikslit emaelemendi baasjoonest allpool. See annab efekti nagu alam- ja -25% väärtused:

Kuidas tabelis olevaid üksusi vertikaalselt joondada

Vertikaalse joondamise atribuudi kasutamine tabeliga on veidi keeruline, kuna tabel on plokielement. Siiski,

Vertikaalselt joondatud ülemise väärtuse kasutamine tabeliandmetes

td {
 kõrgus: 40px;
 vertikaalne joondamine: ülemine;
}

Ülaltoodud kood lisab igale tabeli lahtrile kõrguse 40 pikslit. Seejärel joondab see igas lahtris olevad andmed iga rea ​​ülaosaga. See annab brauseris järgmise väljundi:

Vertikaalse joonduse keskmise väärtuse kasutamine tabeliandmetel

td {
 kõrgus: 40px;
 vertikaalne joondus: keskmine;
}

Vertikaalse joonduse keskmine väärtus ülaltoodud koodis tsentreerib andmed vertikaalselt igas lahtris. See loob brauseris järgmise väljundi:

Vertikaalselt joondatud alumise väärtuse kasutamine tabeliandmetes

td {
 kõrgus: 40px;
 vertikaalne joondamine: alumine;
}

Ülaltoodud kood joondab igas lahtris olevad andmed iga rea ​​alaosaga. See loob brauseris järgmise väljundi:

Nüüd saate oma veebisaidi elemendid joondada

Nüüd saate kasutada CSS-i vertikaalse joondamise atribuuti paljude erinevate tekstisiseste elementidega, sealhulgas teksti, manustatud meediumide ja tabeliandmetega. Üldreegel on see, et vertikaalse joondamise atribuut töötab ainult tekstisiseste ja tekstisiseste plokielementide puhul.

Kuid saate seda atribuuti kasutada plokkide elementide puhul, peate need lihtsalt esmalt teisendama sisesteks või inline-blokielementideks. Pidage meeles, et vertikaaljoondust saate kombineerida muude joondusomadustega, näiteks teksti joondamisega.

Autori kohta

Kadeisha Kean (52 avaldatud artiklit)

Kadeisha Kean on täisstacki tarkvaraarendaja ja tehniline/tehnoloogiakirjutaja. Tal on selge võime lihtsustada mõningaid kõige keerukamaid tehnoloogilisi kontseptsioone; Tootma materjali, mis on kergesti mõistetav igale tehnoloogiaalgajale. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailmas reisimise vastu (dokumentaalfilmide kaudu).

Veel Kadeiha Keanilt