CSS versijā vertikālās līdzināšanas rekvizīts kontrolē iekļauto elementu vai tabulas šūnu vertikālo līdzinājumu to saturošajā elementā. Tas attiecas uz elementiem, kas ir daļa no teksta rindiņas vai tiek parādīti kā iekļauts bloks vai tabulas šūna.

Rekvizītu “Vertikāli izlīdzināt” parasti izmanto iekļautiem elementiem, piemēram, attēliem, tekstam vai iekļautiem bloka elementiem teksta rindiņā. Tas neattiecas tieši uz bloka līmeņa elementiem; tomēr varat izmantot tādas metodes kā flexbox vai pozicionēšana, lai tās vertikāli izlīdzinātu.

Sintakse:

Tālāk ir norādīta vertikālās līdzināšanas rekvizīta pamata sintakse.

 selector { vertical-align: value; } 

'Vērtība' var būt viena no šīm opcijām:

Pamatlīnija:Izlīdzina elementa bāzes līniju ar tā vecākelementa bāzes līniju. Šī ir noklusējuma vērtība lielākajai daļai elementu.Sub:Izlīdzina elementa bāzes līniju ar vecākelementa fonta apakšindeksa bāzes līniju.Super:Izlīdzina elementa bāzes līniju ar vecākelementa fonta augšējo indeksu bāzes līniju.Tops:Izlīdziniet elementa augšdaļu ar augstākā elementa augšdaļu uz līnijas līnijas lodziņā.Teksts augšpusē:Izlīdzina elementa augšdaļu ar vecākelementa fonta augšdaļu.Vidējais:Vertikāli centrē elementu attiecībā pret vecākelementu.Apakšā:Izlīdziniet elementa apakšdaļu ar zemākā elementa apakšdaļu līnijas lodziņā.Teksts apakšā:Izlīdziniet elementa apakšdaļu ar vecākelementa fonta apakšdaļu.Procenti:Elements ir līdzināts vertikāli noteiktā līnijas augstuma procentos. Piemēram, vertikālā līdzināšana: 50% centrēs elementu vertikāli tā vecākelementā.

PIEZĪME. Atcerieties, ka “vertikālā līdzināšana” darbojas atkarībā no elementa veida un konteksta, kurā tā tiek izmantota, tāpēc tās ietekme ne vienmēr var būt vienkārša. Tas ir īpaši noderīgi, lai saskaņotu iekļautos elementus ar tekstu vai citiem iekļautiem elementiem.

Piemēri

Tālāk ir sniegta sīkāka informācija un piemēri, kas saistīti ar rekvizītu “vertikālā līdzināšana” CSS:

1. Pamatlīnijas izlīdzināšana:

Vertikālās izlīdzināšanas bāzes līnijavērtība izlīdzina elementa bāzes līniju ar tā vecākelementa bāzes līniju. Šī ir noklusējuma darbība lielākajai daļai iekļauto elementu.

Pamatlīnija Cits teksts

2. Apakšraksts un augšindekss:

Vertikālā izlīdzināšana:Apakšvērtība izlīdzina elementa bāzes līniju ar vecākelementa fonta apakšindeksa bāzes līniju, padarot to par apakšindeksu. No otras puses,vertikālā izlīdzināšana:Super izlīdzina elementa bāzes līniju ar vecākelementa fonta augšējo indeksu bāzes līniju.

H₂O ir ūdens. x²+ un²= r²

3. Līdzinājums augšā un apakšā:

peles ritenis neritina pareizi

Vertikālā izlīdzināšana:Augstākā vērtība izlīdzina elementa augšdaļu ar augstākā elementa augšdaļu uz līnijas līnijas lodziņā. Līdzīgi,vertikālā izlīdzināšana:Apakšdaļa izlīdzina elementa apakšdaļu ar zemākā elementa apakšdaļu uz līnijas līnijas lodziņā.

Izlīdzināts uz augšu Izlīdzināts apakšā

4. Izlīdzinājums pa vidu:

Vertikālā izlīdzināšana:Vidējā vērtība vertikāli centrē elementu attiecībā pret vecākelementu. To bieži izmanto, lai tekstā centrētu ikonas vai attēlus.

Šī ikona ir vertikāli centrēta

5. Teksta līdzinājums augšpusē un apakšā:

Vertikālā izlīdzināšana:Teksta augšdaļas vērtība izlīdzina elementa augšdaļu ar vecākelementa fonta augšdaļu unvertikālā izlīdzināšana:Teksta apakšdaļa līdzinās elementa apakšdaļai ar vecākelementa fonta apakšdaļu.

Teksts līdzināts augšpusē Teksts līdzināts apakšā

6. Procentuālā līdzināšana:

Procentuālās vērtības izmantošana ar vertikālo līdzinājumu ļauj līdzināt elementu vertikāli noteiktā līnijas augstuma procentos. Piemēram, vertikālā līdzināšana: 50% centrēs elementu uz pusi no līnijas augstuma.

Centrēts Vertikāli

7. Bloka līmeņa elementu vertikālā centrēšana:

Lai vertikāli centrētu bloka līmeņa elementu tā vecākelementa iekšpusē, varat izmantot flexbox vai režģa izkārtojumu.

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

8. Vertikālā centrēšana ar nezināmu elementa augstumu:

Ja nezināt tā elementa augstumu, kuru vēlaties centrēt vertikāli, varat izmantot pozīcijas un transformācijas kombināciju:

 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. Vertikālā centrēšana ar vairāku rindiņu tekstu:

Lai konteinerā vertikāli centrētu vairāku rindiņu tekstu, varat izmantot flexbox un pseidoelementa kombināciju.

 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. Attēlu vertikāla centrēšana konteinerā ar dažādām malu attiecībām:

Ja jums ir dažādu malu attiecību attēli, kurus vēlaties centrēt konteinerā, varat izmantot flexbox un objektu pielāgošanas kombināciju.

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. Vertikālās līdzināšanas apvienošana ar līnijas augstumu:

Varat apvienot vertikālās izlīdzināšanas rekvizītu ar līniju augstuma rekvizītu, lai panāktu precīzāku vertikālo līdzinājumu, īpaši ar lielākiem fonta izmēriem.

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

12. Displeja rekvizīta izmantošana līdzināšanai:

Lai gan vertikālā līdzināšana galvenokārt darbojas ar iekļautiem elementiem, varat mainīt displeja rekvizītu, lai panāktu bloka līmeņa elementu vertikālo līdzināšanu noteiktos kontekstos.

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

13. Vertikālā izlīdzināšana tabulās:

Vertikālās līdzināšanas rekvizītu bieži izmanto tabulas šūnās (), lai kontrolētu satura izlīdzināšanu šūnās.

prioritārā rinda

 td { vertical-align: middle; } 

14. Iekļauto bloku elementu izlīdzināšana:

Varat izmantot vertikālo līdzināšanu, lai teksta rindā līdzinātu iekļautos bloku elementus, piemēram, ikonas blakus tekstam.

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

Šie ir tikai daži piemēri vertikālās izlīdzināšanas apstrādei dažādos scenārijos. Atkarībā no jūsu īpašā izkārtojuma un prasībām, iespējams, jums būs jāpielāgo vai jāapvieno šīs metodes, lai sasniegtu vēlamos rezultātus. CSS nodrošina dažādus rīkus, lai efektīvi apstrādātu vertikālo izlīdzināšanu dažādos kontekstos.

Atcerieties, ka, lai gan vertikālās līdzināšanas rekvizītu var izmantot, ir pieejami visaptverošāki risinājumi visiem līdzināšanas scenārijiem, jo ​​īpaši bloka līmeņa elementiem. Sarežģītākiem izkārtojumiem un izlīdzināšanas prasībām ir ieteicams izpētīt modernas CSS izkārtojuma metodes, piemēram, Flexbox, CSS Grid vai pat CSS pozīcijas vērtības (piemēram, absolūtās un relatīvās), lai vēlamos rezultātus sasniegtu efektīvāk un paredzamāk.

Atcerieties, ka “vertikālā līdzināšana” ietekmē tikai iekļautos elementus vai tabulas šūnas. Izmantojiet tādas metodes kā flexbox, režģa izkārtojums vai pozicionēšana, lai vertikāli izlīdzinātu bloka līmeņa elementus.

Vēl daži piemēri

 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> 

Izvade

Tagad ir vēl viens piemērs, kurā mēs saskaņojam tekstu ar attēlu.

Piemērs

 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. 

Izvade

Vertikālās līdzināšanas priekšrocības CSS

Viegli lietojami iekļautajiem elementiem:Vertikālās līdzināšanas rekvizīts ir vienkāršs, lai līdzinātu elementus, piemēram, attēlus, ikonas vai tekstu teksta rindiņā vai citos elementos.Plašās pārlūkprogrammas atbalsts:Vertikālās līdzināšanas īpašumam ir labs pārlūkprogrammas atbalsts, un tas tiek plaši atbalstīts dažādās pārlūkprogrammās.Vairākas izlīdzināšanas iespējas:Tas nodrošina dažādas izlīdzināšanas opcijas, piemēram, bāzes līniju, vidējo, augšējo, apakšējo, teksta augšējo, apakšējo, apakšindeksu un augšējo indeksu, sniedzot izstrādātājiem elastību elementu izlīdzināšanā atbilstoši viņu prasībām.Atsaucīga izlīdzināšana:To var izmantot atsaucīgā dizainā, lai pielāgotu vertikālo izlīdzinājumu, pamatojoties uz konteinera izmēru vai pieejamo vietu.Iekļauto elementu vienkāršība:Mazu elementu, piemēram, ikonu vai attēlu līdzināšanai teksta rindā, vertikālās līdzināšanas rekvizīts nodrošina salīdzinoši vienkāršu risinājumu, neprasot sarežģītas izkārtojuma metodes.Laba skaņa:Īpašums ļauj precīzi noregulēt elementu vertikālo stāvokli, kas var būt noderīgi konkrētu dizaina mērķu sasniegšanai.Atbilstība tabulas šūnām:Tabulu kontekstā vertikālās līdzināšanas rekvizīts kontrolē satura līdzināšanu tabulas šūnās. Tas var palīdzēt saglabāt konsekvenci tabulu izkārtojumos.Apvienošana ar tekstu:Tas efektīvi izlīdzina elementus ar teksta saturu, piemēram, ikonu vai iekļauto etiķešu līdzināšanu ar blakus esošo tekstu.Malu attiecību uzturēšana:Līdzinot attēlus vai ikonas teksta rindiņā, vertikālā līdzināšana var palīdzēt saglabāt šo elementu malu attiecību, īpaši, ja to kombinē ar atbilstošiem fontu izmēriem un rindu augstumiem.Ātrie izlīdzināšanas labojumi:Ja jums ir nepieciešami ātri vertikālās izlīdzināšanas problēmu risinājumi, jo īpaši scenārijos ar jauktu saturu, vertikālā līdzināšana var nodrošināt ātru risinājumu, neprasot plašu izkārtojuma pārstrukturēšanu.CSS e-pasta stils:HTML e-pastos, kur ir labāk jāatbalsta sarežģīti izkārtojumi, vertikālās līdzināšanas izmantošana var būt noderīga elementu pamata vertikālajai līdzināšanai, nepaļaujoties uz ārējām stilu lapām vai sarežģītām metodēm.Savietojams ar displeju:inline-block: vertikālās izlīdzināšanas rekvizīts ir saderīgs ar iekļautajiem bloka elementiem, ļaujot viegli vertikāli izlīdzināt šādus elementus vienā līnijā.Konsekvences saglabāšana:Elementiem, kas ir daļa no tabulas datiem vai ir jāsaskaņo ar līdzīgiem elementiem dažādās rindās vai kolonnās, vertikālā līdzināšana var palīdzēt saglabāt vizuālo konsekvenci.Pārlūka saderība:Atšķirībā no dažām jaunākām CSS metodēm, vertikālā izlīdzināšana ir bijusi CSS daļa jau ilgu laiku, un tai ir laba saderība starp pārlūkprogrammām.

Vertikālās izlīdzināšanas trūkumi CSS

Tikai iekļauti elementi:Būtiskākais vertikālās līdzināšanas rekvizīta ierobežojums ir tas, ka tas darbojas tikai iekļautiem elementiem vai tabulas šūnām. Tas tieši neattiecas uz bloka līmeņa elementiem. Tas var padarīt vertikālo izlīdzināšanu grūtāku lielākiem elementiem vai sarežģītiem izkārtojumiem.Nekonsekventa uzvedība:Vertikālā līdzināšana var būt sarežģīta un nekonsekventa, jo īpaši ar dažādiem fonta izmēriem, līniju augstumiem un ligzdotiem elementiem. Viena un tā pati vertikālā līdzinājuma vērtība var radīt atšķirīgus rezultātus atkarībā no konteksta.Pārlūkprogrammas dīvainības:Dažām vecākām pārlūkprogrammām var būt nekonsekventas interpretācijas vai dīvainības ar vertikālās līdzināšanas rekvizītu, kas var radīt negaidītus rezultātus. Tomēr šī problēma ir uzlabojusies līdz ar moderno pārlūkprogrammu attīstību.Ierobežota kontrole pār atstarpēm:Vertikālās izlīdzināšanas rekvizīts galvenokārt attiecas uz elementu izlīdzināšanu vertikāli, taču tas piedāvā tikai nelielu kontroli pār atstarpēm starp elementiem. Lai pielāgotu atstarpes, bieži ir nepieciešamas papildu CSS vai HTML modifikācijas.Flexbox un Grid kā alternatīvas:Sarežģītākām izkārtojuma prasībām un bloka līmeņa elementu vertikālai izlīdzināšanai izstrādātāji bieži paļaujas uz Flexbox vai CSS Grid, kas nodrošina stabilākus un paredzamākus risinājumus.Nav piemērots pilnai centrēšanai:Lai gan vertikālā līdzināšana ir noderīga, lai vertikāli izlīdzinātu iekļautos elementus, tā ir piemērota pilna centrēšanai (horizontāli un vertikāli) bloka līmeņa elementiem, izmantojot papildu CSS metodes.Maldinošs nosaukums:Nosaukums “vertikāli izlīdzināt” var būt maldinošs, jo tas neizlīdzina elementu vertikāli, kā to bieži sagaida izstrādātāji. Tā vietā tā kontrolē elementa satura izlīdzināšanu tā rindas lodziņā.Sarežģītība ar dažādiem fontiem:Vertikālās izlīdzināšanas darbība var būt neparedzama, strādājot ar dažāda fonta lieluma un rindu augstuma elementiem. Tas var padarīt konsekventu vertikālo izlīdzināšanu sarežģītu.Ierobežots sarežģītiem izkārtojumiem:Tas nav piemērots sarežģītiem izkārtojumiem vai scenārijiem, kad vecākkonteinerā ir vertikāli jāizlīdzina lielāki bloka līmeņa elementi.Saderība starp pārlūkprogrammām:Lai gan mūsdienu pārlūkprogrammās ir uzlabots atbalsts vertikālajai līdzināšanai, vecākām pārlūkprogrammām joprojām var būt neatbilstības vai neparedzēta darbība.Alternatīvās metodes:Mūsdienu CSS izkārtojuma metodes, piemēram, Flexbox un CSS Grid, piedāvā jaudīgākus un paredzamākus veidus, kā apstrādāt sarežģītas izkārtojuma prasības, tostarp gan iekļauto, gan bloka līmeņa elementu vertikālo izlīdzināšanu.Pieejamības apsvērumi:Vertikālās līdzināšanas izmantošana izkārtojumam var nebūt vispieejamākā pieeja, jo tā var traucēt ekrāna lasītāju un citu palīgtehnoloģiju darbību. Semantiskais HTML un pareizas CSS metodes bieži vien ir labākas pieejamības izvēles iespējas.Atkļūdošanas izaicinājumi:Ar vertikālo izlīdzināšanu saistītu neparedzētu darbību vai izlīdzināšanas problēmu atkļūdošana dažkārt var būt sarežģīta, it īpaši, ja tiek risināti ligzdoti elementi un dažādi fontu izmēri.Tīmekļa izkārtojuma attīstība:Attīstoties tīmekļa izstrādes ainavai, jaunas izkārtojuma metodes, piemēram, CSS Grid Layout un Flexbox, nodrošina modernākus un visaptverošākus risinājumus izkārtojuma problēmām, potenciāli padarot vertikālo līdzināšanu mazāk piemērotu daudziem scenārijiem.

Kopumā, lai gan vertikālās līdzināšanas rekvizīts ir ērts, lai līdzinātu iekļautos elementus vai tabulas šūnas teksta rindiņā, izstrādātājiem bieži ir vajadzīgas citas CSS metodes, lai nodrošinātu sarežģītākas izkārtojuma un pozicionēšanas prasības, jo īpaši, ja runa ir par bloka līmeņa elementiem vai sarežģītiem izkārtojumiem. CSS Flexbox un CSS Grid ir jaudīgas alternatīvas plašākai izlīdzināšanas un pozicionēšanas kontrolei.

Secinājums

Vertikālās līdzināšanas rekvizīts ir noderīgs, lai līdzinātu iekļautos elementus teksta vai tabulas šūnās. Tomēr tam ir ierobežojumi, un to var būt grūti izmantot efektīvi sarežģītiem izkārtojumiem vai bloka līmeņa elementiem. Izstrādātājiem jāapsver mūsdienīgas CSS izkārtojuma metodes, kas nodrošina lielāku kontroli un elastību attiecībā uz izlīdzināšanu un pozicionēšanu.