Kaip išdėstyti žiniatinklio elementus naudojant CSS vertikalią išlygiavimą

Google paieška









Peizažas
Aprašymas






Miškas

Lorem ipsum dolor sit amet.






Vandenynas

Lorem ipsum dolor sit amet.

The HTML kodas aukščiau sukuriamas paprastas tinklalapis, kuriame rodomi keturi elementai: susietas tekstas, vaizdas, įdėtas vaizdo įrašas ir lentelė. Jūsų naršyklėje jis turėtų atrodyti taip:

Kaip vertikaliai lygiuoti tekstą

Pagal numatytuosius nustatymus dauguma teksto elementų (pvz., antraštės,

, ir

Tačiau kai kurie teksto elementai, tokie kaip ir žyma yra įterpta. Dėl to jie palaiko vertikalios išlyginimo savybę. Norėdami vertikaliai lygiuoti tekstą, tiesiog priskirkite atitinkamą vertę CSS vertikalaus lygiavimo ypatybei.

Vertikalaus lygiavimo viršutinės teksto vertės naudojimas

a {
 vertikalus lygiavimas: viršuje;
}

Pridedant CSS kodas virš pagrindinio HTML dokumento sulygiuos viršų pažymėkite tekstą su aukščiausio eilutės elemento viršumi. Gaminamas toks atnaujintas ekranas:

Teksto procentinės reikšmės naudojimas

a {
 vertikalus lygiavimas: -50%;
}

Aukščiau esantis CSS sulygiuoja teksto elementą tokioje padėtyje, kuri yra 50 % žemiau pagrindinio elemento bazinės linijos. Tai jūsų naršyklėje sukuria šią išvestį:

Kaip matote aukščiau esančiame paveikslėlyje, teksto elementas užima vietą po vaizdo ir vaizdo elementais, kurie yra toje pačioje eilutėje. Jei norite, kad šis elementas būtų ties pradine linija arba virš jos, naudokite teigiamą procentinę reikšmę.

Teksto ilgio reikšmės naudojimas

a {
 vertikalus lygiavimas: 90 pikselių;
}

Aukščiau pateiktas kodas sulygiuoja pagrindinę teksto elemento liniją 90 pikselių ilgiu virš pagrindinio elemento bazinės linijos. Tai naršyklėje sukuria tokią išvestį:

Kaip vertikaliai išlygiuoti vaizdus

The žyma yra eilutinis elementas, su kuriuo CSS vertikalaus lygiavimo ypatybė gerai veikia.

Vaizdų vertikalaus lygiavimo super vertės naudojimas

img {
 vertikalus lygiavimas: super;
}

Aukščiau pateiktas kodas pateikia vaizdą pirminio elemento viršutiniame indekse. Tai reiškia, kad padėtis virš bazinės linijos, kaip matote šioje išvestyje:

Vaizdų vertikalaus lygiavimo procentinės reikšmės naudojimas

img {
 vertikalus lygiavimas: 25 %;
}

Aukščiau pateiktas kodas sulygiuoja vaizdo elemento bazinę liniją 25 % virš pradinio elemento bazinės linijos. Tai sukuria tokį super vertės veidrodinį efektą:

Vaizdų ilgio vertės naudojimas vertikaliai lygiuojant

img {
 vertikalus lygiavimas: 5 pikseliai;
}

Aukščiau pateiktas kodas sulygiuoja vaizdo elemento bazinę liniją 5 pikseliais virš pagrindinio elemento pagrindinės linijos. Tai sukuria efektą, panašų į super ir 25% verčių efektą:

Įterptoji medija, pvz., vaizdo įrašai ir „iframe“, yra įterptieji HTML elementai. Todėl su jais puikiai veikia CSS vertikalaus lygiavimo ypatybė.

Vaizdo įraše vertikalios sulygiavimo super vertės naudojimas

video {
 vertikalus lygiavimas: sub;
}

Aukščiau pateiktas kodas nustato vaizdo įrašo vietą pirminio elemento indekso pradinėje linijoje. Tai reiškia, kad padėtis žemiau bazinės linijos, kaip matote šioje išvestyje:

Vaizdo įrašo vertikalaus lygiavimo procentinės reikšmės naudojimas

video {
 vertikalus lygiavimas: -25%;
}

Aukščiau pateiktas kodas sulygiuoja vaizdo įrašo elemento bazinę liniją 25 % žemiau pagrindinio elemento bazinės linijos. Tai sukuria tokį antrinės vertės veidrodinį efektą:

Vaizdo įrašo vertikalaus lygiavimo ilgio reikšmės naudojimas

video {
 vertikalus lygiavimas: -5 pikseliai;
}

Aukščiau pateiktas kodas sulygiuoja vaizdo elemento bazinę liniją 5 piks. žemiau pagrindinio elemento bazinės linijos. Tai sukuria tokį efektą kaip sub ir -25% vertės:

Kaip vertikaliai sulygiuoti elementus lentelėje

Naudoti vertikalaus lygiavimo ypatybę su lentele yra šiek tiek sudėtinga, nes lentelė yra blokinis elementas. Tačiau,

Naudojant vertikaliai išlygiuotą viršutinę lentelės duomenų reikšmę

td {
 aukštis: 40px;
 vertikalus lygiavimas: viršuje;
}

Aukščiau pateiktas kodas kiekvienam lentelės langeliui prideda 40 pikselių aukščio. Tada jis sulygiuoja kiekvieno langelio duomenis su kiekvienos eilutės viršumi. Tai naršyklėje sukuria tokią išvestį:

Lentelės duomenų vertikalaus lygiavimo vidurinės reikšmės naudojimas

td {
 aukštis: 40px;
 vertikalus lygiavimas: vidurys;
}

Vertikalios lygiavimo vidurinė vertė aukščiau esančiame kode vertikaliai centruoja duomenis kiekviename langelyje. Naršyklėje ji sukuria tokią išvestį:

Lentelės duomenų vertikalaus lygiavimo apatinės reikšmės naudojimas

td {
 aukštis: 40px;
 vertikalus lygiavimas: apačioje;
}

Aukščiau pateiktas kodas sulygiuoja kiekvieno langelio duomenis su kiekvienos eilutės apačia. Naršyklėje ji sukuria tokią išvestį:

Dabar galite sulygiuoti elementus savo tinklalapyje

Dabar galite naudoti CSS vertikalaus lygiavimo nuosavybę su daugybe skirtingų įterptųjų elementų, įskaitant tekstą, įterptąją laikmeną ir lentelės duomenis. Bendra taisyklė yra ta, kad vertikalaus lygiavimo ypatybė veikia tik įterptiniuose ir įterptiniuose bloko elementuose.

Tačiau šią ypatybę galite naudoti bloko elementams, tik pirmiausia turite juos konvertuoti į eilutinius arba įterptus bloko elementus. Atminkite, kad vertikalią lygiavimą galite derinti su kitomis lygiavimo savybėmis, pvz., teksto lygiavimu.

Apie autorių

Kadeisha Kean (52 straipsniai paskelbti)

Kadeisha Kean yra visos programinės įrangos kūrėja ir techninių / technologijų rašytoja. Ji turi išskirtinį gebėjimą supaprastinti kai kurias sudėtingiausias technologines koncepcijas; gaminant medžiagą, kurią gali lengvai suprasti bet kuris technologijų naujokas. Ji aistringai rašo, kuria įdomią programinę įrangą ir keliauja po pasaulį (per dokumentinius filmus).

Daugiau iš Kadeisha Kean