U svijetu HTML-a i CSS-a sve se tiče strukture izgleda i distribucije elemenata. Obično koristimo HTML za definiranje oznaka i strukture, dok nam CSS pomaže u rješavanju stila i poravnanja elemenata.
U ovom ćemo postu saznati malo o različitim načinima na koje možemo centrirati HTML elemente i rukovati vertikalnim poravnavanjem sa CSS-om.
Prvo ćemo naučiti kako uskladiti tekst sa CSS-om.
Zatim ćemo pokriti kako poravnati div i bilo koje druge elemente.
I na kraju ćemo naučiti kako možemo sastaviti tekst i znak div
unutar spremnika.
Kako centrirati tekst
Postoji mnogo načina za centriranje teksta pomoću CSS-a.
Korištenje svojstva Float
Float je jednostavan način za poravnanje teksta.
Da bismo tekst postavili na desnu stranu izgleda, možemo jednostavno koristiti right
kao vrijednost za float
.
Za postavljanje teksta na lijevu stranu koristimo left
, poput float:left
. Pogledajte primjer u nastavku:
.right { float: right; } .left { float: left; } // HTML Right Left
Za centriranje teksta pomoću float-a možemo koristiti margin-left
ili margin-right
i napraviti ga 50%
, kao u nastavku.
.center { float: left; margin-left: 50%; } /* HTML*/ Center
Ovdje možete saznati više o upotrebi Float
.
Korištenje poravnanja teksta
text-align
prikladniji je i specifičniji način poravnanja teksta. Omogućuje nam da tekst postavimo na center
ili na left
ili sa right
strane, kao što pokazuje sljedeći primjer:
.right { text-align: right; } .left { text-align: left; } .center { text-align: center; } /* HTML */ Right
Center
Left
Saznajte više o text-align
.
Kako poravnati a div
Pa, postoji puno načina za to.
Na isti način na koji koristimo Float
poravnavanje teksta, možemo ga koristiti i za poravnavanje div
elementa.
Float
obavlja posao, ali CSS nam daje bolje mogućnosti koje su prikladnije i elegantnije. Jeste li čuli Flexbox
? Ili css-grid?
Pa, ove dvije metode pružaju vrlo moderne načine za usklađivanje i rad s vašim izgledom u CSS-u. Pogledajmo Flexbox detaljnije.
Flexbox
Flexbox nudi jednostavan i jednostavan način poravnavanja div
- i to mi je zasad najdraža metoda za rukovanje rasporedima u CSS-u (koristim ga svakodnevno).
Pogledajmo što bismo radili Flexbox
da bismo vidjeli kako to funkcionira stvarajući isti primjer kao gore.
Primjer:
Kod:
Flexbox .container { display: flex; } .container div { width: 33%; height: 60px; } .left { background: yellow; } .right { background: red; } .center { background: lightblue; } Left div centered div right div
razbijemo ga
- Uvijek definiramo
div
roditelja pomoćudisplay:flex
prijaveFlexbox
. Dakle, omogućujemodiv
rukovanje svim dijelovima div-a unutar roditelja pomoćuFlexbox
svojstava. - Prema zadanim postavkama
flex-direction
koristirow
smjer, što znači da će elementi biti postavljeni okomito unutar spremnika. - Uz
justify-content
imovinu možemo usmjeravanjediv
je djece (i) u različitim smjerovima kao u sljedećem primjeru:
.container{ display: flex: justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */ }
justify-content:center
postavlja elemente u središte posude.justify-content:flex-start
stavlja elemente na početak spremnika s lijeve strane.justify-content:flex-end
postavlja elemente na kraj spremnika s desne strane.justify-content:space-around
čini da elementi stanu u posudu i stavlja jednak razmak između svih elemenata.justify-content:space-evenly
distribuira elemente unutar nadređenog spremnika jednako s istim prostorom i istom širinom.
Gornji se primjer odnosi na djecu svih elemenata kao skupinu.
Zamislite ako bismo htjeli poravnati jednu jedinicu div
unutar spremnika. Uvijek možemo koristiti align-self
za poravnanje pojedinog elementa.
.container div{ align-self:center /* can have: flex-start, or flex-end*/ }
Na tekst možemo primijeniti isto što i Flexbox
u sljedećem primjeru:
.right{ display: flex; align-items: flex-end; flex-direction: column; } right div
Ovo je sjajan tweet Julije Evans koji ilustrira centriranje u CSS-u općenito:

Zamotati
Postoji mnogo načina za centriranje elemenata u CSS-u. A s vremenom ćete uvijek naučiti nove stvari dok vježbate sve više i više.
Stoga vam preporučujem da razmotrite neke primjere onoga što ste danas naučili kako bi ostalo.
- Trebao bi me slijediti Twitter?
- Pogledajte Moj Github
- Posjetite moj blog