Tekst u HTML centru - Kako CSS okomito poravnati div

Programiranje

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 divunutar 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-leftili margin-righti 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-alignprikladniji je i specifičniji način poravnanja teksta. Omogućuje nam da tekst postavimo na centerili na leftili sa rightstrane, 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 Floatporavnavanje teksta, možemo ga koristiti i za poravnavanje divelementa.

Floatobavlja 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 Flexboxda 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ću display:flexprijave Flexbox. Dakle, omogućujemo divrukovanje svim dijelovima div-a unutar roditelja pomoću Flexboxsvojstava.
  • Prema   zadanim postavkama flex-directionkoristi rowsmjer, što znači da će elementi biti postavljeni okomito unutar spremnika.
  • Uz justify-contentimovinu možemo usmjeravanje divje 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 divunutar spremnika. Uvijek možemo koristiti align-selfza poravnanje pojedinog elementa.

.container div{ align-self:center /* can have: flex-start, or flex-end*/ }

Na tekst možemo primijeniti isto što i Flexboxu 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