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:
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 linija Drugi tekst
2. Indeks i superskript:
kako pronaći skrivene aplikacije na androidu
H2O je voda. x2+ i2= r2
3. Gornje i donje poravnanje:
Poravnano gore Poravnano dolje
4. Srednje poravnanje:
Ova je ikona okomito centrirana
5. Poravnanje teksta na vrhu i na dnu:
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: ''; 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 (
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>⭐</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>Testirajte sada
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.Testirajte sada
Izlaz
Prednosti okomitog poravnanja u CSS-u
Nedostaci okomitog poravnanja u CSS-u
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.