CSS vertikalaus lygiavimo ypatybė valdo vertikalų eilutinio lygio elementų arba lentelės langelių lygiavimą juose esančiame elemente. Tai taikoma elementams, kurie yra teksto eilutės dalis arba rodomi kaip eilutinis blokas arba lentelės langelis.

Ypatybė „vertikalaus lygiavimo“ dažniausiai naudojama įterptiesiems elementams, pvz., vaizdams, tekstui arba įterptiesiems bloko elementams teksto eilutėje. Jis tiesiogiai netaikomas bloko lygio elementams; tačiau galite naudoti tokius metodus kaip „flexbox“ arba padėties nustatymas, kad juos išlygiuotumėte vertikaliai.

Sintaksė:

Štai pagrindinė vertikalaus lygiavimo nuosavybės sintaksė:

 selector { vertical-align: value; } 

„Vertė“ gali būti viena iš šių parinkčių:

Pradinė padėtis:Sulygiuoja elemento bazinę liniją su pagrindinio elemento bazine linija. Tai yra numatytoji daugelio elementų reikšmė.Sub:Sulygiuoja elemento bazinę liniją su pagrindinio elemento šrifto apatinio indekso bazine linija.Super:Sulygiuoja elemento bazinę liniją su pagrindinio elemento šrifto viršutine indekso bazine linija.Į viršų:Sulygiuokite elemento viršų su aukščiausio elemento viršumi linijos laukelyje.Tekstas viršuje:Sulygiuoja elemento viršų su pagrindinio elemento šrifto viršumi.Vidurys:Vertikaliai centruoja elementą pirminio elemento atžvilgiu.Apačia:Sulygiuokite elemento apačią su žemiausio elemento apačia linijos laukelyje.Tekstas apačioje:Sulygiuokite elemento apačią su pagrindinio elemento šrifto apačia.Procentas:Elementas išlygiuotas vertikaliai tam tikru linijos aukščio procentu. Pavyzdžiui, vertikaliai sulygiuoti: 50 % elemento centre bus vertikaliai pirminiame elemente.

PASTABA: atminkite, kad „vertikalus lygiavimas“ veikia konkrečiai, atsižvelgiant į elemento tipą ir kontekstą, kuriame jis naudojamas, todėl jo poveikis ne visada gali būti aiškus. Tai ypač naudinga derinant eilutinius elementus su tekstu ar kitais įterptais elementais.

Pavyzdžiai

Štai keletas daugiau informacijos ir pavyzdžių, susijusių su „vertikalaus lygiavimo“ nuosavybe CSS:

1. Pagrindinės linijos lygiavimas:

Vertikalaus išlygiavimo bazinė linijareikšmė sulygiuoja elemento bazinę liniją su pagrindinio elemento bazine linija. Tai yra numatytasis daugelio įterptųjų elementų elgesys.

Bazinė linija Kitas tekstas

2. Indeksas ir viršutinis indeksas:

Vertikalus lygiavimas:Antrinė reikšmė sulygiuoja elemento bazinę liniją su pagrindinio elemento šrifto indekso bazine linija, todėl jis atrodo kaip apatinis indeksas. Iš kitos pusės,vertikalus lygiavimas:Super sulygiuoja elemento bazinę liniją su pagrindinio elemento šrifto viršutine indekso bazine linija.

H₂O yra vanduo. x²+ ir²= r²

java palyginimo eilutė

3. Lygiavimas iš viršaus ir apačios:

Vertikalus lygiavimas:Viršutinė vertė sulygiuoja elemento viršų su aukščiausio elemento viršumi eilutės laukelyje. Panašiai,vertikalus lygiavimas:Apačia sulygiuoja elemento apačią su žemiausio elemento apačia linijos laukelyje.

Išlyginta viršuje Sulygiuotas apačioje

4. Vidurio lygiavimas:

rūšiavimo algoritmai sujungia rūšiavimą

Vertikalus lygiavimas:Vidutinė vertė vertikaliai centruoja elementą pirminio elemento atžvilgiu. Tai dažnai naudojama centruoti piktogramas ar vaizdus tekste.

Ši piktograma yra vertikaliai centre

5. Teksto lygiavimas viršuje ir apačioje:

Vertikalus lygiavimas:Teksto viršuje vertė sulygiuoja elemento viršų su pagrindinio elemento šrifto viršumi irvertikalus lygiavimas:Teksto apačia sulygiuoja elemento apačią su pagrindinio elemento šrifto apačia.

Tekstas sulygiuotas viršuje Sulygiuotas tekstas apačioje

6. Procentų lygiavimas:

Naudodami procentinę reikšmę su vertikaliu lygiavimu, galite lygiuoti elementą vertikaliai tam tikru linijos aukščio procentu. Pavyzdžiui, vertikaliai sulygiuoti: 50 % elemento centre bus pusė linijos aukščio.

Centruota vertikaliai

7. Vertikalus bloko lygio elementų centravimas:

Norėdami vertikaliai centruoti bloko lygio elementą pirminiame elemente, galite naudoti lanksčiosios dėžutės arba tinklelio išdėstymą.

 Flexbox example: html Vertically Centered css .parent { display: flex; justify-content: center; align-items: center; height: 200px; /* Set the desired container height */ } 

8. Vertikalus centravimas su nežinomu elemento aukščiu:

Jei nežinote elemento, kurį norite centruoti vertikaliai, aukščio, galite naudoti pozicijos ir transformacijos derinį:

 html Vertically Centered (Unknown Height) CSS .parent { position: relative; height: 200px; /* Set the desired container height */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

9. Vertikalus centravimas su kelių eilučių tekstu:

medžio žemėlapis

Norėdami vertikaliai centruoti kelių eilučių tekstą sudėtiniame rodinyje, galite naudoti „flexbox“ ir pseudoelemento derinį:

 html Multi-line <br>Vertically Centered Text CSS .parent { display: flex; align-items: center; height: 200px; /* Set the desired container height */ } .child { flex: 1; text-align: center; } .child::before { content: &apos;&apos;; display: inline-block; vertical-align: middle; height: 100%; } 

10. Vertikalus vaizdų centravimas sudėtiniame rodinyje su skirtingais kraštinių santykiais:

Jei turite įvairių formatų vaizdų, kuriuos norite centruoti sudėtiniame rodinyje, galite naudoti lanksčiosios dėžutės ir objekto pritaikymo derinį:

HTML:

 <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 1"> <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css.webp" alt="Image 2"> 

CSS:

 .parent { display: flex; align-items: center; justify-content: center; height: 200px; /* Set the desired container height */ } img { object-fit: contain; max-height: 100%; } 

11. Vertikalaus lygiavimo derinimas su linijos aukščiu:

Vertikalaus išlygiavimo ypatybę galite derinti su linijos aukščio ypatybe, kad pasiektumėte tikslesnį vertikalų lygiavimą, ypač naudojant didesnius šrifto dydžius.

 .element { font-size: 24px; line-height: 1.5; vertical-align: middle; } 

12. Ekrano ypatybės naudojimas lygiavimui:

Nors vertikalus lygiavimas visų pirma veikia su eilutinio lygio elementais, galite pakeisti rodymo ypatybę, kad būtų pasiektas vertikalus bloko lygio elementų lygiavimas tam tikruose kontekstuose.

 .container { display: table-cell; vertical-align: middle; } 

13. Vertikalus lygiavimas lentelėse:

Vertikalaus lygiavimo ypatybė dažnai naudojama lentelės langeliuose (), kad galėtumėte valdyti turinio išlygiavimą ląstelėse.

 td { vertical-align: middle; } 

14. Eilutinio bloko elementų lygiavimas:

Galite naudoti vertikalų lygiavimą, norėdami lygiuoti eilutinius bloko elementus teksto eilutėje, pavyzdžiui, piktogramas šalia teksto.

 <span>&#x2B50;</span> Star Rating .icon { vertical-align: middle; font-size: 24px; } 

Tai tik keli vertikalaus išlygiavimo pavyzdžiai įvairiuose scenarijuose. Atsižvelgiant į jūsų konkretų išdėstymą ir reikalavimus, norint pasiekti norimus rezultatus, gali tekti pritaikyti arba derinti šiuos metodus. CSS suteikia įvairių įrankių, leidžiančių efektyviai tvarkyti vertikalų lygiavimą įvairiuose kontekstuose.

Atminkite, kad nors vertikalaus lygiavimo nuosavybė yra naudojama, yra išsamesnių sprendimų visiems lygiavimo scenarijams, ypač bloko lygio elementams. Sudėtingesniems išdėstymams ir derinimo reikalavimams rekomenduojama ištirti šiuolaikines CSS išdėstymo technologijas, tokias kaip Flexbox, CSS Grid ar net CSS padėties reikšmes (pvz., absoliučiąsias ir santykines), kad norimi rezultatai būtų pasiekti efektyviau ir nuspėjamiau.

Atminkite, kad „vertikalus lygiavimas“ turi įtakos tik eilutės lygio elementams arba lentelės langeliams. Naudokite tokius metodus kaip „flexbox“, tinklelio išdėstymas arba padėties nustatymas, kad vertikaliai sulygiuotumėte bloko lygio elementus.

Huffman kodavimo kodas

Dar keli pavyzdžiai

 table, th, td{ border: 2px solid red; border-collapse: collapse; font-size: 20px; } #super{ vertical-align: super; } #sub{ vertical-align: sub; } <table class="table"> <td>baseline</td> <td>middle</td> <td>bottom</td> <td>top</td> <td>Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. </td> </table> <h2> Use of super and sub values </h2> <h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3> <h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3> 

Išvestis

Dabar yra dar vienas pavyzdys, kuriame mes deriname tekstą su vaizdu.

Pavyzdys

 div{ font-size: 20px; border: 2px solid red; } img{ width:150px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp"> image with a default alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-bottom alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a middle alignment. An <img src="//techcodeview.com/img/css-tutorial/72/vertical-align-css-2.webp" alt> image with a text-top alignment. 

Išvestis

Vertikalaus lygiavimo privalumai CSS

Lengva naudoti įterptiesiems elementams:Vertikalaus lygiavimo ypatybė yra paprasta, norint lygiuoti elementus, pvz., vaizdus, ​​piktogramas ar tekstą, teksto eilutėje ar kituose elementuose.Plačios naršyklės palaikymas:Vertikalaus lygiavimo nuosavybė turi gerą naršyklės palaikymą ir yra plačiai palaikoma įvairiose naršyklėse.Keli lygiavimo parinktys:Jame pateikiamos įvairios lygiavimo parinktys, pvz., pradinė linija, vidurys, viršuje, apačioje, tekstas viršuje, apačioje, apatinis indeksas ir viršutinis indeksas, todėl kūrėjai gali lanksčiai derinti elementus pagal savo reikalavimus.Atsakingas lygiavimas:Jis gali būti naudojamas reaguojančiame projekte, kad būtų galima pritaikyti vertikalią išlygiavimą pagal konteinerio dydį arba laisvą erdvę.Inline elementų paprastumas:Sulygiuoti mažus elementus, pvz., piktogramas ar vaizdus teksto eilutėje, vertikalaus lygiavimo ypatybė yra gana paprastas sprendimas, nereikalaujantis sudėtingų išdėstymo metodų.Tikslus derinimas:Savybė leidžia tiksliai sureguliuoti vertikalią elementų padėtį, o tai gali būti naudinga siekiant konkrečių projektavimo tikslų.Suderinamumas su lentelės langeliais:Lentelių kontekste vertikalaus lygiavimo ypatybė valdo turinio lygiavimą lentelės langeliuose. Tai gali padėti išlaikyti lentelėmis pagrįstų maketų nuoseklumą.Sujungimas su tekstu:Jis efektyviai sulygiuoja elementus su teksto turiniu, pvz., lygiuoja piktogramas arba eilutines etiketes su gretimu tekstu.Kraštinių santykio palaikymas:Lygiuojant vaizdus ar piktogramas teksto eilutėje, vertikalus lygiavimas gali padėti išlaikyti šių elementų formato santykį, ypač kai derinamas su atitinkamais šriftų dydžiais ir eilučių aukščiais.Greiti derinimo pataisymai:Kai reikia greitai išspręsti vertikalaus lygiavimo problemas, ypač esant mišraus turinio scenarijams, vertikalus lygiavimas gali būti greitas sprendimas, nereikalaujant didelio išdėstymo pertvarkos.CSS el. pašto stilius:HTML el. laiškuose, kuriuose reikia geriau palaikyti sudėtingus išdėstymus, vertikaliojo lygiavimo naudojimas gali būti naudingas atliekant pagrindinį vertikalią elementų lygiavimą, nepasikliaujant išoriniais stilių lentelėmis ar sudėtingomis technikomis.Suderinamas su ekranu:inline-block: vertikalaus išlygiavimo ypatybė suderinama su eilutinio bloko elementais, todėl tokius elementus galima lengvai vertikaliai išlygiuoti eilutėje.Nuoseklumo palaikymas:Elementų, kurie yra lentelės duomenų dalis arba kuriuos reikia lygiuoti su panašiais skirtingų eilučių ar stulpelių elementais, vertikalus lygiavimas gali padėti išlaikyti vizualinį nuoseklumą.Naršyklės suderinamumas:Skirtingai nuo kai kurių naujesnių CSS metodų, vertikalus lygiavimas ilgą laiką buvo CSS dalis ir turi gerą suderinamumą tarp naršyklių.

Vertikalaus lygiavimo trūkumai CSS

Apribota eilutiniais elementais:Svarbiausias vertikalaus lygiavimo ypatybės apribojimas yra tas, kad ji veikia tik eilutinio lygio elementams arba lentelės langeliams. Jis tiesiogiai netaikomas bloko lygio elementams. Dėl to vertikalus lygiavimas gali būti sudėtingesnis didesnių elementų ar sudėtingų išdėstymų atveju.Nenuoseklus elgesys:Vertikalus lygiavimas gali būti sudėtingas ir nenuoseklus, ypač naudojant skirtingus šrifto dydžius, linijų aukščius ir įdėtus elementus. Ta pati vertikalaus lygiavimo vertė gali duoti skirtingus rezultatus, atsižvelgiant į kontekstą.Naršyklės ypatybės:Kai kurios senesnės naršyklės gali turėti nenuoseklių interpretacijų arba keistų vertikalaus lygiavimo ypatybių, o tai gali sukelti netikėtų rezultatų. Tačiau ši problema pagerėjo tobulėjant šiuolaikinėms naršyklėms.Ribota tarpų kontrolė:Vertikalaus lygiavimo ypatybė pirmiausia susijusi su elementų lygiavimu vertikaliai, tačiau ji suteikia tik šiek tiek galimybių valdyti tarpą tarp elementų. Norint reguliuoti tarpus, dažnai reikia atlikti papildomus CSS arba HTML pakeitimus.„Flexbox“ ir „Grid“ kaip alternatyvos:Siekdami sudėtingesnių išdėstymo reikalavimų ir vertikaliai išlyginti bloko lygio elementus, kūrėjai dažnai pasikliauja „Flexbox“ arba CSS Grid, kurie teikia patikimesnius ir labiau nuspėjamus sprendimus.Netinka pilnam centrui:Nors vertikalus lygiavimas yra naudingas vertikaliai lygiuojant įterptuosius elementus, jis tinka viso centro (horizontaliai ir vertikaliai) bloko lygio elementams naudojant papildomus CSS metodus.Klaidinantis pavadinimas:Pavadinimas „vertikalus lygiavimas“ gali būti klaidinantis, nes jis nesulygiuoja elemento vertikaliai taip, kaip dažnai kūrėjai tikisi. Vietoj to, jis valdo elemento turinio lygiavimą eilutės laukelyje.Sudėtingumas naudojant skirtingus šriftus:Vertikalaus lygiavimo veikimas gali būti nenuspėjamas, kai kalbama apie skirtingų šriftų dydžių ir eilučių aukščio elementus. Dėl to nuoseklus vertikalus lygiavimas gali būti sudėtingas.Apribota sudėtingiems maketams:Tai netinka sudėtingiems išdėstymams ar scenarijams, kai pirminiame sudėtiniame rodinyje turite vertikaliai sulygiuoti didesnius bloko lygio elementus.Suderinamumas su keliomis naršyklėmis:Nors šiuolaikinės naršyklės patobulino vertikalaus lygiavimo palaikymą, senesnėse naršyklėse vis tiek gali būti nenuoseklumų arba netikėtų veiksmų.Alternatyvios technikos:Šiuolaikinės CSS išdėstymo technologijos, tokios kaip „Flexbox“ ir CSS Grid, siūlo galingesnius ir nuspėjamus būdus, kaip tvarkyti sudėtingus išdėstymo reikalavimus, įskaitant vertikalų įterptųjų ir bloko lygio elementų lygiavimą.Prieinamumo aplinkybės:Vertikalaus lygiavimo naudojimas išdėstymui gali būti ne pats prieinamiausias būdas, nes tai gali trukdyti ekrano skaitytuvams ir kitoms pagalbinėms technologijoms. Semantinis HTML ir tinkami CSS metodai dažnai yra geresni prieinamumo pasirinkimai.Derinimo iššūkiai:Netikėto elgesio ar lygiavimo problemų, susijusių su vertikaliu lygiavimu, derinimas kartais gali būti sudėtingas, ypač kai susiduriama su įdėtais elementais ir įvairiais šriftų dydžiais.Žiniatinklio išdėstymo evoliucija:Tobulėjant žiniatinklio kūrimo aplinkai, nauji išdėstymo būdai, tokie kaip CSS tinklelio išdėstymas ir „Flexbox“, pateikia modernesnius ir visapusiškesnius išdėstymo iššūkių sprendimus, todėl vertikalus lygiavimas gali būti ne toks svarbus daugeliui scenarijų.

Apskritai, nors vertikalaus lygiavimo ypatybė yra patogi lygiuojant eilutinius elementus arba lentelės langelius teksto eilutėje, kūrėjams dažnai reikia kitų CSS metodų, kad būtų taikomi sudėtingesni išdėstymo ir padėties nustatymo reikalavimai, ypač kai kalbama apie bloko lygio elementus arba sudėtingus išdėstymus. CSS Flexbox ir CSS Grid yra galingos alternatyvos platesniam lygiavimui ir padėties valdymui.

Išvada

Vertikalaus lygiavimo ypatybė naudinga lygiuojant įterptus elementus teksto arba lentelės langeliuose. Tačiau jis turi apribojimų ir gali būti sudėtingas efektyviai naudoti sudėtingiems išdėstymams ar bloko lygio elementams. Kūrėjai turėtų apsvarstyti šiuolaikinius CSS išdėstymo metodus, kurie suteikia daugiau valdymo ir lankstumo nustatant lygiavimą ir padėties nustatymą.