U CSS-u, svojstvo vertical-align kontrolira okomito poravnanje elemenata umetnute razine ili ćelija tablice unutar elementa koji ih sadrži. Primjenjuje se na elemente koji su dio retka teksta ili se prikazuju kao umetnuti blok ili ćelija tablice.

Svojstvo 'vertical-align' obično se koristi za umetnute elemente kao što su slike, tekst ili elementi umetnutog bloka unutar retka teksta. Ne primjenjuje se izravno na elemente na razini bloka; međutim, možete koristiti tehnike kao što su flexbox ili pozicioniranje kako biste ih okomito poravnali.

Sintaksa:

Evo osnovne sintakse za svojstvo vertikalnog poravnanja:

 selector { vertical-align: value; } 

'Vrijednost' može biti jedna od sljedećih opcija:

Osnovna linija:Poravnava osnovnu liniju elementa s osnovnom linijom nadređenog elementa. Ovo je zadana vrijednost za većinu elemenata.Pod:Poravnava osnovnu liniju elementa s osnovnom linijom indeksa fonta nadređenog elementa.Super:Poravnava osnovnu liniju elementa s osnovnom linijom gornjeg indeksa fonta nadređenog elementa.Vrh:Poravnajte vrh elementa s vrhom najvišeg elementa na retku unutar okvira retka.Tekst na vrhu:Poravnava vrh elementa s vrhom fonta nadređenog elementa.Sredina:Okomito centrira element u odnosu na nadređeni element.Dno:Poravnajte donji dio elementa s dnom najnižeg elementa na retku unutar okvira retka.Tekst na dnu:Poravnajte dno elementa s dnom fonta nadređenog elementa.Postotak:Element je okomito poravnat na određenom postotku visine crte. Na primjer, vertical-align: 50% sredit će element okomito unutar nadređenog elementa.

NAPOMENA: Zapamtite da 'vertical-align' ima svoje specifično ponašanje ovisno o vrsti elementa i kontekstu u kojem se koristi, tako da njegovi učinci možda neće uvijek biti jasni. Posebno je koristan za poravnavanje umetnutih elemenata s tekstom ili drugim umetnutim elementima.

Primjeri

Evo još nekih pojedinosti i primjera koji se odnose na svojstvo 'vertical-align' u CSS-u:

1. Poravnanje osnovne linije:

Osnovna crta okomitog poravnanjavrijednost poravnava osnovnu liniju elementa s osnovnom linijom njegovog roditeljskog elementa. Ovo je zadano ponašanje za većinu inline-level elemenata.

Osnovna linija Drugi tekst

2. Indeks i superskript:

kako pronaći skrivene aplikacije na androidu

Okomito poravnanje:Subvrijednost poravnava osnovnu liniju elementa s osnovnom linijom indeksa fonta nadređenog elementa, čineći da se pojavljuje kao indeks. S druge strane,okomito poravnanje:Super poravnava osnovnu liniju elementa s osnovnom linijom gornjeg indeksa fonta nadređenog elementa.

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

3. Gornje i donje poravnanje:

Okomito poravnanje:Gornja vrijednost poravnava vrh elementa s vrhom najvišeg elementa na retku unutar okvira retka. Slično tome,okomito poravnanje:Dno poravnava dno elementa s dnom najnižeg elementa na retku unutar okvira retka.

Poravnano gore Poravnano dolje

4. Srednje poravnanje:

Okomito poravnanje:Srednja vrijednost okomito centrira element u odnosu na nadređeni element. To se često koristi za centriranje ikona ili slika unutar teksta.

Ova je ikona okomito centrirana

5. Poravnanje teksta na vrhu i na dnu:

Okomito poravnanje:Vrijednost vrha teksta poravnava vrh elementa s vrhom fonta nadređenog elementa iokomito poravnanje:Text-bottom poravnava dno elementa s dnom fonta nadređenog elementa.

Tekst poravnat s vrhom Tekst poravnat na dno

6. Postotno poravnanje:

Korištenje postotne vrijednosti s okomitim poravnanjem omogućuje vam okomito poravnanje elementa na određeni postotak visine retka. Na primjer, okomito poravnanje: 50% sredit će element na pola visine retka.

Centrirano okomito

7. Okomito centriranje elemenata na razini bloka:

Za okomito centriranje elementa na razini bloka unutar njegovog nadređenog, možete koristiti flexbox ili raspored rešetke.

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

8. Okomito centriranje s nepoznatom visinom elementa:

Ako ne znate visinu elementa koji želite centrirati okomito, možete upotrijebiti kombinaciju položaja i 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. Okomito centriranje s tekstom u više redaka:

Za okomito centriranje višerednog teksta unutar spremnika, možete koristiti kombinaciju flexboxa i pseudoelementa:

 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. Okomito centriranje slika u spremniku s različitim omjerima:

Ako imate slike različitih omjera širine i visine koje želite centrirati unutar spremnika, možete upotrijebiti kombinaciju flexboxa i prilagodbe objekta:

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. Kombiniranje okomitog poravnanja s visinom linije:

Svojstvo okomitog poravnanja možete kombinirati sa svojstvom visine linije kako biste postigli preciznije okomito poravnanje, posebno s većim veličinama fonta.

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

12. Korištenje Svojstva prikaza za poravnanje:

Dok okomito poravnanje primarno radi s elementima na razini inline, možete promijeniti svojstvo prikaza kako biste postigli okomito poravnanje za elemente na razini bloka unutar određenih konteksta.

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

13. Okomito poravnanje u tablicama:

Svojstvo vertikalnog poravnanja često se koristi u ćelijama tablice () za kontrolu poravnanja sadržaja unutar ćelija.

10 posto od 60

 td { vertical-align: middle; } 

14. Poravnanje elemenata unutarnjeg bloka:

Možete koristiti okomito poravnanje za poravnavanje elemenata umetnutog bloka unutar retka teksta, na primjer, ikona uz tekst.

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

Ovo je samo nekoliko primjera rukovanja okomitim poravnanjem u različitim scenarijima. Ovisno o vašem specifičnom izgledu i zahtjevima, možda ćete morati prilagoditi ili kombinirati ove tehnike kako biste postigli željene rezultate. CSS pruža razne alate za učinkovito rukovanje okomitim poravnanjem u različitim kontekstima.

Imajte na umu da iako svojstvo okomitog poravnanja ima koristi, postoje sveobuhvatnija rješenja za sve scenarije poravnanja, posebno elemente na razini bloka. Za složenije izglede i zahtjeve za poravnanjem preporučuje se istraživanje modernih tehnika CSS izgleda kao što su Flexbox, CSS Grid ili čak CSS vrijednosti položaja (kao što su apsolutne i relativne) kako bi se željeni rezultati postigli učinkovitije i predvidljivije.

Imajte na umu da 'vertical-align' utječe samo na elemente unutarnje razine ili ćelije tablice. Upotrijebite tehnike kao što su flexbox, raspored rešetki ili pozicioniranje za vertikalno poravnavanje elemenata na razini bloka.

Još nekoliko primjera

 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> 

Izlaz

Sada postoji još jedan primjer u kojem poravnavamo tekst sa slikom.

Primjer

 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. 

Izlaz

Prednosti okomitog poravnanja u CSS-u

Jednostavan za korištenje za umetnute elemente:Svojstvo vertical-align je jednostavno za poravnavanje elemenata, kao što su slike, ikone ili tekst, unutar retka teksta ili drugih elemenata.Podrška za široki preglednik:Svojstvo vertical-align ima dobru podršku preglednika i široko je podržano u različitim preglednicima.Više opcija poravnanja:Omogućuje različite opcije poravnanja, kao što su osnovna linija, sredina, vrh, dno, tekst na vrhu, tekst na dnu, indeks i nadnaslov, dajući programerima fleksibilnost u poravnavanju elemenata na temelju njihovih zahtjeva.Odgovarajuće poravnanje:Može se koristiti u responzivnom dizajnu za prilagodbu okomitog poravnanja na temelju veličine spremnika ili dostupnog prostora.Jednostavnost za ugrađene elemente:Za poravnavanje malih elemenata poput ikona ili slika unutar retka teksta, svojstvo vertikalnog poravnanja pruža relativno jednostavno rješenje bez potrebe za složenim tehnikama izgleda.Fino podešavanje:Svojstvo omogućuje fino podešavanje okomitog položaja elemenata, što može biti korisno za postizanje specifičnih ciljeva dizajna.Dosljednost s ćelijama tablice:U kontekstu tablica, svojstvo vertical-align kontrolira poravnanje sadržaja unutar ćelija tablice. To može pomoći u održavanju dosljednosti u rasporedima koji se temelje na tablici.Kombinacija s tekstom:Učinkovito poravnava elemente s tekstualnim sadržajem, poput poravnavanja ikona ili umetnutih oznaka sa susjednim tekstom.Održavanje omjera slike:Kada poravnavate slike ili ikone unutar retka teksta, okomito poravnanje može pomoći u održavanju omjera širine i visine ovih elemenata, posebno u kombinaciji s odgovarajućom veličinom fonta i visinom redaka.Brzi popravci usklađivanja:Kada su vam potrebna brza rješenja za probleme okomitog poravnanja, posebno u scenarijima s mješovitim sadržajem, okomito poravnanje može pružiti brzo rješenje bez potrebe za opsežnim restrukturiranjem izgleda.CSS stil e-pošte:U HTML porukama e-pošte, gdje treba bolje podržati složene izglede, korištenje okomitog poravnanja može biti od pomoći za osnovno okomito poravnanje elemenata bez oslanjanja na vanjske tablice stilova ili složene tehnike.Kompatibilan sa zaslonom:inline-block: Svojstvo vertical-align kompatibilno je s inline-block elementima, omogućujući jednostavno okomito poravnanje takvih elemenata unutar linije.Održavanje dosljednosti:Za elemente koji su dio tabličnih podataka ili se trebaju uskladiti sa sličnim elementima u različitim recima ili stupcima, okomito poravnanje može pomoći u održavanju vizualne dosljednosti.Kompatibilnost preglednika:Za razliku od nekih novijih CSS tehnika, okomito poravnanje već je dugo dio CSS-a i uživa dobru kompatibilnost s više preglednika.

Nedostaci okomitog poravnanja u CSS-u

Ograničeno na ugrađene elemente:Najznačajnije ograničenje svojstva okomitog poravnanja je to što radi samo za elemente unutarnje razine ili ćelije tablice. Ne odnosi se izravno na elemente na razini bloka. To može učiniti okomito poravnanje većim izazovom za veće elemente ili složene rasporede.Nedosljedno ponašanje:Okomito poravnanje može biti teško i nedosljedno, osobito s različitim veličinama fonta, visinama redaka i ugniježđenim elementima. Ista vrijednost okomitog poravnanja može dati različite rezultate na temelju konteksta.Čudovišta preglednika:Neki stariji preglednici mogu imati nedosljedna tumačenja ili nedostatke sa svojstvom okomitog poravnanja, što može dovesti do neočekivanih rezultata. Međutim, ovaj problem se poboljšao s napretkom modernih preglednika.Ograničena kontrola razmaka:Svojstvo vertical-align prvenstveno se bavi okomitim poravnavanjem elemenata, ali nudi samo malu kontrolu nad razmakom između elemenata. Podešavanje razmaka često zahtijeva dodatne CSS ili HTML izmjene.Flexbox i Grid kao alternative:Za složenije zahtjeve izgleda i okomito poravnanje elemenata na razini bloka, programeri se često oslanjaju na Flexbox ili CSS Grid, koji pružaju robusnija i predvidljivija rješenja.Nije prikladno za potpuno centriranje:Dok je okomito poravnanje korisno za okomito poravnavanje inline elemenata, prikladno je za potpuno centriranje (vodoravno i okomito) elemenata na razini bloka s dodatnim CSS tehnikama.Obmanjujući naziv:Naziv 'vertical-align' može dovesti u zabludu jer ne poravnava element okomito na način na koji programeri često očekuju. Umjesto toga, kontrolira poravnanje sadržaja elementa unutar njegovog retka.Složenost s različitim fontovima:Ponašanje okomitog poravnanja može biti nepredvidivo kada se radi o elementima različitih veličina fonta i visine redaka. To može učiniti dosljedno okomito poravnanje izazovnim.Ograničeno za složene rasporede:Nije prikladan za složene rasporede ili scenarije u kojima morate okomito poravnati veće elemente na razini bloka unutar nadređenog spremnika.Kompatibilnost s više preglednika:Dok moderni preglednici imaju poboljšanu podršku za okomito poravnanje, stariji preglednici i dalje mogu pokazivati ​​nedosljednosti ili neočekivano ponašanje.Alternativne tehnike:Moderne tehnike izgleda CSS-a kao što su Flexbox i CSS Grid nude snažnije i predvidljivije načine za rješavanje složenih zahtjeva izgleda, uključujući okomito poravnanje elemenata u liniji i na razini bloka.Razmatranja pristupačnosti:Korištenje okomitog poravnanja za izgled možda nije najpristupačniji pristup jer bi moglo ometati čitače zaslona i druge pomoćne tehnologije. Semantički HTML i odgovarajuće CSS tehnike često su bolji izbori za pristupačnost.Izazovi otklanjanja pogrešaka:Otklanjanje pogrešaka neočekivanog ponašanja ili problema s poravnanjem povezanih s okomitim poravnavanjem ponekad može biti teško, osobito kada se radi o ugniježđenim elementima i različitim veličinama fonta.Evolucija web izgleda:Kako se krajolik web razvoja razvija, nove tehnike izgleda kao što su CSS Grid Layout i Flexbox pružaju modernija i sveobuhvatnija rješenja za izazove izgleda, potencijalno čineći okomito poravnanje manje relevantnim za mnoge scenarije.

Općenito, iako je svojstvo okomitog poravnanja zgodno za poravnavanje umetnutih elemenata ili ćelija tablice unutar retka teksta, programeri često trebaju druge CSS tehnike za naprednije zahtjeve izgleda i pozicioniranja, posebno kada se bave elementima na razini bloka ili složenim izgledima. CSS Flexbox i CSS Grid moćne su alternative za širu kontrolu poravnanja i pozicioniranja.

Zaključak

Svojstvo vertical-align korisno je za poravnavanje umetnutih elemenata unutar teksta ili ćelija tablice. Međutim, ima ograničenja i može biti izazov za učinkovito korištenje za složene rasporede ili elemente na razini bloka. Programeri bi trebali razmotriti moderne tehnike izgleda CSS-a koje pružaju više kontrole i fleksibilnosti nad poravnavanjem i pozicioniranjem.