V CSS-ju lastnost vertical-align nadzira navpično poravnavo elementov v vrstici ali celic tabele znotraj elementa, ki jih vsebuje. Velja za elemente, ki so del vrstice besedila ali so prikazani kot blok v vrstici ali celica tabele.

Lastnost 'vertical-align' se običajno uporablja za vstavljene elemente, kot so slike, besedilo ali elementi vstavljenih blokov znotraj vrstice besedila. Ne velja neposredno za elemente na ravni bloka; vendar pa lahko uporabite tehnike, kot je flexbox ali pozicioniranje, da jih poravnate navpično.

Sintaksa:

Tukaj je osnovna sintaksa za lastnost vertikalne poravnave:

 selector { vertical-align: value; } 

'Vrednost' je lahko ena od naslednjih možnosti:

Izhodišče:Poravna osnovno črto elementa z osnovno črto njegovega nadrejenega elementa. To je privzeta vrednost za večino elementov.pod:Poravna osnovno črto elementa z osnovno črto indeksa pisave nadrejenega elementa.Super:Poravna osnovno črto elementa z osnovno črto nadnapisa pisave nadrejenega elementa.Vrh:Poravnajte vrh elementa z vrhom najvišjega elementa na črti znotraj črtnega polja.Besedilo na vrhu:Poravna zgornji del elementa z vrhom pisave nadrejenega elementa.Sredina:Navpično centrira element glede na nadrejeni element.Spodaj:Poravnajte spodnji del elementa z spodnjim delom najnižjega elementa na črti znotraj črtnega polja.Besedilo spodaj:Poravnajte spodnji del elementa z spodnjim delom pisave nadrejenega elementa.Odstotek:Element je poravnan navpično na določen odstotek višine črte. Na primer, navpična poravnava: 50 % bo središče elementa navpično znotraj nadrejenega elementa.

OPOMBA: Ne pozabite, da ima 'vertical-align' svoje specifično vedenje, odvisno od vrste elementa in konteksta, v katerem se uporablja, zato njegovi učinki morda niso vedno enostavni. Še posebej je uporaben za poravnavo vstavljenih elementov z besedilom ali drugimi vstavljenimi elementi.

Primeri

Tu je še nekaj podrobnosti in primerov, povezanih z lastnostjo 'vertical-align' v CSS:

1. Poravnava osnovne črte:

Osnovna črta navpične poravnavevrednost poravna osnovno črto elementa z osnovno črto njegovega nadrejenega elementa. To je privzeto vedenje za večino elementov na ravni vrstice.

Izhodišče Drugo besedilo

2. Podpis in nadpis:

Navpična poravnava:Podvrednost poravna osnovno črto elementa z osnovno črto indeksa pisave nadrejenega elementa, zaradi česar je videti kot indeks. Po drugi strani,navpična poravnava:Super poravna osnovno črto elementa z osnovno črto nadnapisa pisave nadrejenega elementa.

H₂O je voda. x²+ in²= r²

3. Poravnava zgoraj in spodaj:

Navpična poravnava:Najvišja vrednost poravna vrh elementa z vrhom najvišjega elementa na črti znotraj črtnega polja. Podobno,navpična poravnava:Dno poravna spodnji del elementa z dnom najnižjega elementa na črti znotraj črtnega polja.

Poravnano zgoraj Poravnano spodaj

4. Srednja poravnava:

Navpična poravnava:Srednja vrednost navpično sredi element glede na nadrejeni element. To se pogosto uporablja za centriranje ikon ali slik znotraj besedila.

Ta ikona je navpično na sredini

5. Poravnava besedila zgoraj in spodaj:

Navpična poravnava:Vrednost vrha besedila poravna zgornji del elementa z vrhom pisave nadrejenega elementa innavpična poravnava:Text-bottom poravna spodnji del elementa z dnom pisave nadrejenega elementa.

Besedilo poravnano na vrh Besedilo poravnano na dno

6. Odstotna poravnava:

Uporaba odstotne vrednosti z navpično poravnavo vam omogoča, da element poravnate navpično na določen odstotek višine vrstice. Na primer, navpična poravnava: 50 % bo središče elementa na polovici višine vrstice.

kamelji piton

Osredotočeno navpično

7. Navpično centriranje elementov na ravni bloka:

Za navpično centriranje elementa na ravni bloka znotraj njegovega nadrejenega elementa lahko uporabite flexbox ali mrežno postavitev.

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

8. Navpično centriranje z neznano višino elementa:

Če ne poznate višine elementa, ki ga želite centrirati navpično, lahko uporabite kombinacijo položaja in transformacije:

 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. Navpično centriranje z večvrstičnim besedilom:

Za navpično centriranje večvrstičnega besedila znotraj vsebnika lahko uporabite kombinacijo flexboxa in psevdoelementa:

 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. Navpično centriranje slik v vsebniku z različnimi razmerji stranic:

Če imate slike z različnimi razmerji stranic, ki jih želite centrirati znotraj vsebnika, lahko uporabite kombinacijo flexbox in object-fit:

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. Kombinacija navpične poravnave z višino črte:

Lastnost vertical-align lahko kombinirate z lastnostjo line-height, da dosežete natančnejšo navpično poravnavo, zlasti pri večjih velikostih pisave.

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

12. Uporaba lastnosti zaslona za poravnavo:

Medtem ko navpična poravnava deluje predvsem z elementi na ravni v vrstici, lahko spremenite lastnost prikaza, da dosežete navpično poravnavo za elemente na ravni bloka znotraj določenih kontekstov.

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

13. Navpična poravnava v tabelah:

Lastnost navpične poravnave se pogosto uporablja v celicah tabele () za nadzor poravnave vsebine znotraj celic.

kakec

 td { vertical-align: middle; } 

14. Poravnava elementov v bloku:

Z navpično poravnavo lahko poravnate elemente blokov v vrstici znotraj vrstice besedila, na primer ikone ob besedilu.

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

To je le nekaj primerov ravnanja z navpično poravnavo v različnih scenarijih. Glede na vašo specifično postavitev in zahteve boste morda morali te tehnike prilagoditi ali združiti, da boste dosegli želene rezultate. CSS ponuja različna orodja za učinkovito upravljanje navpične poravnave v različnih kontekstih.

Ne pozabite, da čeprav se lastnost navpične poravnave lahko uporablja, obstajajo celovitejše rešitve za vse scenarije poravnave, zlasti za elemente na ravni bloka. Za bolj zapletene postavitve in zahteve glede poravnave je priporočljivo raziskovanje sodobnih tehnik postavitve CSS, kot so Flexbox, CSS Grid ali celo vrednosti položaja CSS (kot sta absolutna in relativna), da dosežete želene rezultate bolj učinkovito in predvidljivo.

Ne pozabite, da 'navpična poravnava' vpliva samo na elemente v vrstici ali celice tabele. Za navpično poravnavo elementov na ravni bloka uporabite tehnike, kot so flexbox, postavitev mreže ali pozicioniranje.

Še nekaj primerov

 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> 

Izhod

Tukaj je še en primer, v katerem besedilo poravnamo s sliko.

Primer

 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. 

Izhod

Prednosti navpične poravnave v CSS

Enostaven za uporabo za vgrajene elemente:Lastnost vertical-align je preprosta za poravnavo elementov, kot so slike, ikone ali besedilo, znotraj vrstice besedila ali drugih elementov.Podpora za širok brskalnik:Lastnost vertical-align ima dobro podporo brskalnika in je široko podprta v različnih brskalnikih.Več možnosti poravnave:Zagotavlja različne možnosti poravnave, kot so osnovna črta, sredina, vrh, dno, besedilo na vrhu, besedilo na dnu, indeks in nadnapis, kar razvijalcem omogoča prilagodljivost pri poravnavi elementov glede na njihove zahteve.Odzivna poravnava:Uporablja se lahko v odzivnem dizajnu za prilagoditev navpične poravnave glede na velikost vsebnika ali razpoložljivega prostora.Preprostost za vgrajene elemente:Za poravnavo majhnih elementov, kot so ikone ali slike v vrstici besedila, lastnost navpične poravnave zagotavlja razmeroma preprosto rešitev, ne da bi zahtevali zapletene tehnike postavitve.Fina nastavitev:Lastnost omogoča fino nastavitev navpičnega položaja elementov, kar je lahko uporabno za doseganje določenih ciljev oblikovanja.Skladnost s celicami tabele:V kontekstu tabel lastnost navpične poravnave nadzoruje poravnavo vsebine znotraj celic tabele. To lahko pomaga ohranjati doslednost med postavitvami, ki temeljijo na tabelah.Kombinacija z besedilom:Učinkovito poravna elemente z besedilno vsebino, na primer poravnavo ikon ali nalepk v vrstici s sosednjim besedilom.Ohranjanje razmerja stranic:Pri poravnavi slik ali ikon v vrstici besedila lahko navpična poravnava pomaga ohraniti razmerje stranic teh elementov, zlasti v kombinaciji z ustreznimi velikostmi pisave in višino vrstic.Hitri popravki poravnave:Ko potrebujete hitre popravke za težave z navpično poravnavo, zlasti v scenarijih z mešano vsebino, lahko navpična poravnava zagotovi hitro rešitev, ne da bi zahtevali obsežno prestrukturiranje postavitve.Oblikovanje e-pošte CSS:V e-poštnih sporočilih HTML, kjer je treba bolje podpreti zapletene postavitve, je uporaba navpične poravnave lahko koristna za osnovno navpično poravnavo elementov brez zanašanja na zunanje slogovne liste ali zapletene tehnike.Združljivo z zaslonom:inline-block: Lastnost vertical-align je združljiva z elementi inline-block, kar omogoča preprosto navpično poravnavo takšnih elementov znotraj črte.Ohranjanje doslednosti:Za elemente, ki so del tabelaričnih podatkov ali jih je treba poravnati s podobnimi elementi v različnih vrsticah ali stolpcih, lahko navpična poravnava pomaga ohraniti vizualno doslednost.Združljivost brskalnika:Za razliko od nekaterih novejših tehnik CSS je navpična poravnava že dolgo del CSS in uživa dobro združljivost med brskalniki.

Slabosti navpične poravnave v CSS

Omejeno na elemente v vrstici:Najpomembnejša omejitev lastnosti navpične poravnave je, da deluje samo za elemente v vrstici ali celice tabele. Ne velja neposredno za elemente na ravni bloka. To lahko naredi navpično poravnavo večji izziv za večje elemente ali zapletene postavitve.Nedosledno vedenje:Navpična poravnava je lahko težavna in nedosledna, zlasti pri različnih velikostih pisave, višinah vrstic in ugnezdenih elementih. Ista vrednost navpične poravnave lahko povzroči različne rezultate glede na kontekst.Domislice brskalnika:Nekateri starejši brskalniki imajo lahko nedosledne interpretacije ali čudne lastnosti lastnosti navpične poravnave, kar lahko vodi do nepričakovanih rezultatov. Vendar se je ta težava izboljšala z napredkom sodobnih brskalnikov.Omejen nadzor nad razmikom:Lastnost vertical-align primarno obravnava navpično poravnavo elementov, vendar ponuja le majhen nadzor nad razmikom med elementi. Prilagajanje razmika pogosto zahteva dodatne spremembe CSS ali HTML.Flexbox in Grid kot alternativa:Za zahtevnejše postavitve in navpično poravnavo elementov na ravni blokov se razvijalci pogosto zanašajo na Flexbox ali CSS Grid, ki zagotavljata robustnejše in predvidljivejše rešitve.Ni primerno za polno centriranje:Medtem ko je navpična poravnava uporabna za navpično poravnavo elementov v vrstici, je primerna za elemente na ravni bloka s polnim centriranjem (vodoravno in navpično) z dodatnimi tehnikami CSS.Zavajajoče ime:Ime 'vertical-align' je lahko zavajajoče, ker elementa ne poravna navpično tako, kot razvijalci pogosto pričakujejo. Namesto tega nadzoruje poravnavo vsebine elementa v njegovem vrstičnem polju.Kompleksnost z različnimi pisavami:Vedenje navpične poravnave je lahko nepredvidljivo, ko imamo opravka z elementi različnih velikosti pisave in višine vrstic. Zaradi tega lahko dosledna navpična poravnava postane izziv.Omejeno za zapletene postavitve:Ni primeren za zapletene postavitve ali scenarije, kjer morate navpično poravnati večje elemente na ravni blokov znotraj nadrejenega vsebnika.Združljivost med brskalniki:Čeprav imajo sodobni brskalniki izboljšano podporo za navpično poravnavo, lahko starejši brskalniki še vedno kažejo nedoslednosti ali nepričakovano vedenje.Alternativne tehnike:Sodobne tehnike postavitve CSS, kot sta Flexbox in CSS Grid, ponujajo zmogljivejše in predvidljivejše načine za obravnavo kompleksnih zahtev glede postavitve, vključno z navpično poravnavo elementov na ravni vrstic in blokov.Premisleki glede dostopnosti:Uporaba navpične poravnave za postavitev morda ni najbolj dostopen pristop, saj lahko moti bralnike zaslona in druge podporne tehnologije. Semantični HTML in ustrezne tehnike CSS so pogosto boljša izbira za dostopnost.Izzivi pri odpravljanju napak:Odpravljanje napak pri nepričakovanem vedenju ali težavah s poravnavo, povezanih z navpično poravnavo, je včasih lahko težavno, zlasti ko imamo opravka z ugnezdenimi elementi in različnimi velikostmi pisave.Razvoj spletne postavitve:Ko se krajina spletnega razvoja razvija, nove tehnike postavitve, kot sta CSS Grid Layout in Flexbox, zagotavljajo sodobnejše in celovitejše rešitve za izzive postavitve, zaradi česar je lahko navpična poravnava manj pomembna za številne scenarije.

Na splošno, medtem ko je lastnost navpične poravnave priročna za poravnavo elementov v vrstici ali celic tabele znotraj vrstice besedila, razvijalci pogosto potrebujejo druge tehnike CSS za naprednejše zahteve glede postavitve in pozicioniranja, zlasti ko imajo opravka z elementi na ravni blokov ali kompleksnimi postavitvami. CSS Flexbox in CSS Grid sta močni alternativi za širšo poravnavo in nadzor položaja.

Zaključek

Lastnost navpične poravnave je uporabna za poravnavo elementov v vrstici znotraj besedila ali celic tabele. Vendar pa ima omejitve in je lahko zahtevna učinkovita uporaba za kompleksne postavitve ali elemente na ravni blokov. Razvijalci bi morali razmisliti o sodobnih tehnikah postavitve CSS, ki zagotavljajo več nadzora in prilagodljivosti nad poravnavo in pozicioniranjem.