Ovaj vodič demonstrira postupak vodoravnog i okomitog poravnanja pomoću CSS-a.
Kako vodoravno i okomito poravnati pomoću CSS-a?
Razvojni programeri koriste 'horizontalno' i 'vertikalno' poravnanje kako bi rasporedili i pozicionirali elemente na web stranici na organiziraniji način. Mogu biti korisni u poravnavanju elemenata i sadržaja, pozicioniranju gumba ili ikona, itd. Slijedite donje primjere za bolje razumijevanje:
Horizontalno poravnanje
U CSS-u, svojstvo text-align koristi se za horizontalno poravnavanje teksta unutar nadređenog elementa. Posjetite donje isječke koda za bolje razumijevanje:
< tijelo >
< div razreda = 'račun' >
< div razreda = 'leftAlign' > Linuxhint je lijevo poravnanje < / div >
< div razreda = 'centralno poravnanje' > Linuxhint je Center Align < / div >
< div razreda = 'desno poravnaj' > Linuxhint je desno poravnanje < / div >
< / div >
< / tijelo >
U gornjem isječku koda:
- Prvo, roditelj “ div ' element se koristi s atributom klase koji ima vrijednost ' račun ”.
- Zatim su stvorena tri podređena elementa i atribut klase je dodijeljen svakom divu.
- Na kraju, vrijednosti “leftAlign”, “centerAlign” i “rightAlign” daju se klasama.
Sada umetnite sljedeća CSS svojstva u '
.leftAlign {
prikaz : inline-blok ;
širina : 30% ;
podstava : 20 px ;
boja pozadine : šumskozelena ;
poravnanje teksta : lijevo ;
}
.centerAlign {
prikaz : inline-blok ;
širina : 30% ;
boja pozadine : Crvena ;
podstava : 20 px ;
poravnanje teksta : centar ;
}
.desnoPoravnaj {
prikaz : inline-blok ;
širina : 30% ;
boja pozadine : plavozelena ;
podstava : 20 px ;
poravnanje teksta : pravo ;
}
>
U gornjem bloku koda:
- Prvo se odabiru sve tri klase zasebno, a zatim se primjenjuju CSS svojstva “ prikaz ”, “ širina ”, “ boja pozadine ' i ' podstava ' njima. Ova se svojstva koriste za poboljšanje vizualizacije.
- Zatim, vrijednosti ' lijevo ”, “ centar ' i ' pravo ' dostavljaju se ' poravnanje teksta ' svojstvo za ' lijevoPoravnaj ”, “ centerAlign ', i ' desno poravnanje ” klase, odnosno.
Nakon procesa kompilacije, HTML elementi izgledaju ovako:
Gornja snimka preglednika pokazuje da su elementi vodoravno poravnati u lijevom, središnjem i desnom položaju.
Okomito poravnanje
CSS ' okomito poravnati ” svojstvo poravnava odabrani element s “ y-os ” unutar svog nadređenog elementa. Moguće vrijednosti za svojstvo 'vertical-align' su ' Osnovna linija ”, “ pod ”, “ super ”, “ vrh ”, “ tekst-top ”, “ sredini ”, “ dno ', i ' tekst-dno ”. Međutim, programeri uglavnom koriste vrijednosti 'vrh', 'sredina' i 'dno' pri izradi dizajna web stranica. Da biste odabrani HTML element poravnali na gornju poziciju, posjetite isječak koda u nastavku:
< div razreda = 'računati' >< img src = 'hiunsplash.jpg' širina = '200 px' visina = '200 px' >
< raspon razreda = 'natpisTopAlign' > Ovaj je tekst poravnat na vrhu okomito pored slike < / raspon >
< / div >
U gornjem isječku koda:
- Najprije stvorite roditelj ' div ' i dodijelite mu vrijednost ' računati ' prema ' razreda ” atribut.
- Unutar nadređenog spremnika upotrijebite '
” i navedite putanju slike kao vrijednost za “ src ” atribut.
- Osim toga, navedite vrijednost ' 200 px ' za oba ' širina ' i ' visina ' atributi '
” oznaka.
- Zatim upotrijebite ' ” označite i dajte mu klasu „ natpisTopAlign ”. Na kraju mu dostavite lažne podatke.
Sada dodajte CSS svojstva za stiliziranje HTML elemenata:
.računati {širina : fit-sadržaj ;
prikaz : blok ;
margin-lijevo : 100 px ;
podstava : 10 px ;
granica : 2 px čvrsta Crvena ;
}
.captionTopAlign {
vertikalna
U gornjem bloku koda:
- Prvo odaberite nadređenog ' računati ' i navedite vrijednosti 'fit-content', 'block', '100px', '10px' i '2px solid red' u CSS ' širina ”, “ prikaz ”, “ margin-lijevo ”, “ podstava ' i ' granica ' Svojstva. Ova se svojstva koriste za stiliziranje nadređenog elementa.
- Zatim odaberite ' natpisTopAlign ' klasa i navedite vrijednost ' vrh ' u CSS ' okomito poravnati ” vlasništvo. Time se HTML element poravnava na gornju poziciju.
Nakon izvršavanja gornjih redaka koda, web stranica izgleda ovako:
Gornja snimka pokazuje da je odabrani HTML element sada poravnat s vrhom. Na isti način, element se može poravnati u središnjem, donjem smjeru itd.
Zaključak
Za vodoravno i okomito poravnanje, ' poravnanje teksta ' i ' okomito poravnati ” Koriste se svojstva CSS-a. Svojstvo 'text-align' dopušta vrijednost ' lijevo ”, “ pravo ”, “ centar ' i ' opravdati ”. S druge strane, moguće vrijednosti za svojstvo 'vertical-align' su ' Osnovna linija ”, “ pod ”, “ super ”, “ vrh ”, “ tekst-top ”, “ sredini ”, “ dno ', i ' tekst-dno ”. Horizontalno i okomito poravnanje pomaže u stvaranju čistih i profesionalnih web dizajna.