CSS pruža nekoliko svojstava poravnanja. Svojstvo text-align, ograničeno na blok elemente i ćelije tablice, opisuje horizontalno poravnanje. Nasuprot tome, svojstvo vertikalnog poravnanja primjenjuje se samo na umetnute elemente i ćelije tablice.
Možete koristiti mnogo različitih vrijednosti za kontrolu okomitog poravnanja. Neki se odnose na roditeljski element, drugi na elemente koji se prikazuju na istoj vodoravnoj liniji. Saznajte kako točno možete koristiti vertikalno poravnanje u raznim situacijama kako biste postigli točno pozicioniranje.
Različite vrijednosti okomitog poravnanja
Svojstvo vertical-align uzima tri različite vrste vrijednosti: ključne riječi, postotke i duljine. Svaka vrijednost predstavlja okomiti položaj u retku ili u odnosu na roditeljski (spremnik) element ciljanog elementa.
Glavne vrijednosti vertikalnog poravnanja su:
- osnovna linija: postavlja ciljni element unutar osnovne linije roditeljskog elementa.
- top: pozicionira vrh ciljnog elementa s vrhom najvišeg elementa u trenutnom retku.
- sredina: centrira ciljni element unutar njegovog trenutnog retka.
- dno: pozicionira dno ciljnog elementa s dnom najnižeg elementa u trenutnom retku.
- sub: pozicionira ciljni element s osnovnom linijom indeksa roditeljskog elementa.
- super: pozicionira ciljni element na osnovnu liniju nadreda roditeljskog elementa.
- text-top: postavlja ciljni element na vrh fonta roditeljskog elementa.
- text-bottom: postavlja ciljni element na dno fonta roditeljskog elementa.
- postotak (npr. 20%): pozicionira osnovnu crtu ciljnog elementa na točku iznad, ispod ili na osnovnu crtu roditeljskog elementa. Ova vrijednost može biti negativna ili pozitivna.
- duljina (npr. 10em): pozicionira osnovnu crtu ciljnog elementa na točku iznad, ispod ili na osnovnu liniju roditeljskog elementa. Ova vrijednost može biti negativna ili pozitivna.
Osnovni HTML predložak
Dokument
Pejzaž
Opis
Šuma
Lorem ipsum dolor sit amet.
ocean
Lorem ipsum dolor sit amet.
The HTML kod iznad stvara jednostavnu web stranicu koja prikazuje četiri elementa: povezani tekst, sliku, ugrađeni video i tablicu. U vašem pregledniku bi trebao izgledati ovako:
Kako okomito poravnati tekst
Prema zadanim postavkama, većina tekstualnih elemenata (kao što su naslovi,
, i
Međutim, neki elementi teksta kao što su i oznake su umetnute. Kao rezultat toga, oni podržavaju svojstvo vertikalnog poravnanja. Da biste okomito poravnali tekst, jednostavno dodijelite odgovarajuću vrijednost CSS svojstvu vertical-align.
Korištenje okomitog poravnanja vrha Vrijednost na tekstu
a {
vertikalno poravnati: vrh;
}
Dodavanje CSS kod iznad osnovnog HTML dokumenta poravnat će vrh označite tekst s vrhom najvišeg elementa u retku. Izrada sljedećeg ažuriranog zaslona:
Korištenje postotne vrijednosti na tekstu
a {
okomito poravnanje: -50%;
}CSS iznad poravnava element teksta na poziciji koja je 50% ispod osnovne linije nadređenog elementa. U vašem pregledniku proizvodi sljedeći izlaz:
Kao što možete vidjeti na gornjoj slici, element teksta zauzima poziciju ispod slike i video elemenata, koji se nalaze na istoj liniji. Za pozicioniranje ovog elementa na ili iznad osnovne linije, upotrijebite pozitivnu postotnu vrijednost.
Korištenje vrijednosti duljine u tekstu
a {
vertikalno poravnanje: 90px;
}
Gornji kod poravnava osnovnu liniju elementa teksta na duljini od 90px iznad osnovne crte nadređenog elementa. Ovo proizvodi sljedeći izlaz u pregledniku:
Kako okomito poravnati slike
The tag je umetnuti element s kojim CSS svojstvo vertical-align dobro radi.
Upotreba supervrijednosti vertikalnog poravnanja na slikama
img {
vertikalno poravnanje: super;
}
Gornji kod pozicionira sliku na gornjoj liniji nadređenog elementa. To znači na poziciji iznad osnovne linije, kao što možete vidjeti u sljedećem izlazu:
Korištenje postotne vrijednosti vertikalnog poravnanja na slikama
img {
okomito poravnanje: 25%;
}
Gornji kod poravnava osnovnu liniju elementa slike na 25% iznad osnovne crte nadređenog elementa. To proizvodi sljedeći zrcalni efekt super vrijednosti:
Korištenje vrijednosti duljine vertikalnog poravnanja na slikama
img {
okomito poravnanje: 5px;
}
Gornji kod poravnava osnovnu liniju elementa slike na poziciji 5px iznad osnovne linije nadređenog elementa. To proizvodi učinak sličan onom super i 25% vrijednosti:
Ugrađeni mediji kao što su videozapisi i iframe su ugrađeni HTML elementi. Stoga, svojstvo CSS vertikalno poravnanje izvrsno funkcionira s njima.
Upotreba super vrijednosti okomitog poravnanja na videozapisu
video {
vertikalno poravnanje: pod;
}
Gornji kod postavlja videozapis na osnovnu liniju indeksa nadređenog elementa. To znači na poziciji ispod osnovne linije, kao što možete vidjeti u sljedećem izlazu:
Korištenje postotne vrijednosti okomitog poravnanja na videozapisu
video {
okomito poravnanje: -25%;
}
Gornji kod poravnava osnovnu liniju video elementa na 25% ispod osnovne crte nadređenog elementa. To proizvodi sljedeći zrcalni efekt podvrijednosti:
Korištenje vrijednosti duljine okomitog poravnanja na videozapisu
video {
okomito poravnanje: -5px;
}
Gornji kod poravnava osnovnu liniju elementa slike na poziciji 5px ispod osnovne crte nadređenog elementa. To proizvodi efekt poput vrijednosti sub i -25%:
Kako okomito poravnati stavke u tablici
Korištenje svojstva vertical-align sa tablicom je malo zeznuto, jer je tablica blok element. Međutim
Korištenje gornje vrijednosti vertikalnog poravnanja na podacima tablice
td {
visina: 40px;
vertikalno poravnati: vrh;
}
Gornji kod dodaje visinu od 40px svakoj ćeliji u tablici. Zatim poravnava podatke u svakoj ćeliji s vrhom svakog retka. Ovo proizvodi sljedeći izlaz u pregledniku:
Korištenje srednje vrijednosti vertikalnog poravnanja na podacima tablice
td {
visina: 40px;
okomito poravnanje: sredina;
}
Srednja vrijednost vertikalnog poravnanja u kodu iznad okomito centrira podatke unutar svake ćelije. U pregledniku proizvodi sljedeći izlaz:
Korištenje donje vrijednosti okomitog poravnanja na podacima tablice
td {
visina: 40px;
vertikalno poravnati: dno;
}
Gornji kod poravnava podatke u svakoj ćeliji s dnom svakog retka. U pregledniku proizvodi sljedeći izlaz:
Sada možete poravnati elemente na svojoj web stranici
Sada možete koristiti CSS svojstvo vertikalnog poravnanja s mnoštvom različitih umetnutih elemenata, uključujući tekst, ugrađene medije i tablične podatke. Opće je pravilo da svojstvo vertikalno poravnanje radi samo na inline i inline-block elementima.
Međutim, ovo svojstvo možete koristiti na blok elementima, samo ih trebate prvo pretvoriti u inline ili inline-blok elemente. Zapamtite da možete kombinirati vertikalno poravnanje s drugim svojstvima poravnanja, kao što je poravnavanje teksta.
Poravnajte stvari sa svojstvom CSS Poravnanje teksta
Pročitajte dalje
Povezane teme
- Programiranje
- Programiranje
- CSS
- HTML
- Web dizajn
O autoru
Kadeisha Kean je programerka punog softvera i tehnička/tehnološka spisateljica. Ona ima izrazitu sposobnost da pojednostavi neke od najsloženijih tehnoloških koncepata; proizvodnju materijala koji svaki početnik u tehnologiji može lako razumjeti. Ona je strastvena u pisanju, razvoju zanimljivog softvera i putovanju svijetom (kroz dokumentarne filmove).
Pretplatite se na naše obavijesti
Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e-knjige i ekskluzivne ponude!
Kliknite ovdje za pretplatu