Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

Kako centrirati element na sredinu ekrana?

Kako centrirati element na sredinu ekrana?
Autor članka: Igor Kovačić
Kategorije: Programiranje
Teme:
Datum objave: 27.08.2011

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.

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. ;)

Komentirajte prvi!

Pratite komentare na članak 'Kako centrirati element na sredinu ekrana?' putem RSS feeda.

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.