Kako centrirati element na sredinu ekrana?
Vodič je stariji od 2 godine i možda nije u potpunosti aktualan.
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:
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. ;)
Pogledajte još i sljedeće vodiče
Nadamo se da je ovaj vodič koristio. Ako imate pitanja, možete nam se obratiti putem formulara pitajte učitelja
