Skoči na sadržaj

Kako centrirati element na sredinu ekrana?

Vodič je stariji od 2 godine i možda nije u potpunosti aktualan.

Prijavite grešku u vodiču

U ovom naprednijem CSS vodiču pokazat ćemo kako centrirati (vertikalno i horizontalno) element fiksne širine na sredinu ekrana. Trik koji ćemo pokazati često je primjenjiv na login forme.

Kako centrirati element na sredinu ekrana?

Krajnji rezultat:

centriranje

HTML kôd unutar <body> taga je:

<div id="login-box">
  <!-- ovdje ide sadržaj forme -->
</div>

… a CSS koji će pozicionirati div sa id-om login-box je:

#login-box {
  width: 350px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -100px;
}

Box mora biti apsolutno ili fiksno pozicioniran te odmaknut 50% od vrha i lijeve strane. Nakon utvrđivanja širine pomoću width i height property-a možemo odrediti vrijednosti top i left margine. One su uvijek negativne i iznose točno pola širine box-a.

To je sve. ;)

HTML file sa uključenim CSS-om preuzmite ovdje.

Nadamo se da je ovaj vodič koristio. ;)

Ako imate pitanja, možete nam se obratiti putem formulara pitajte učitelja

Komentirajte prvi