CSS Centriranje elemenata po horizontali i vertikali

U dananjem tutorijalu emo proi kroz 2 naina pozicioniranja elemenata uz pomo CSS koda. Iako je to
jedna od najbitnijih stvari kada je CSS kodiranje u pitanju, mnogi imaju problem kako centrirati neki
element na stranici, pa bespotrebno komplikuju i dovijaju se na najrazliitije, esto nepravilne naine.
Ono to esto posebno stvara problem jeste kako neki element pozicionirati po vertikali. S toga emo u
ovom tutorijalu proi kroz oba pozicioniranja - vertikalno i horizontalno.

Horizontalno pozicioniranje elementa

Prvo emo kreirati jedan div element:
<div id="square"></div>
a zatim mu dodeliti irinu i visinu od 200px i sivu boju pozadine:
#square {
width: 200px;
height: 200px;
background-color: grey;
position: relative;
}

Nakon to smo napravili eljeni kvadrat, pozicioniraemo ga centralno po horizontali,

odnosno po x osi.
#square {
width: 200px;
height: 200px;
background-color: grey;
position: relative;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}

Ili krae:
#square {
width: 200px;
height: 200px;
background-color: grey;
margin: 0 auto;
}

Potpuno je svejedno da li ete napisati dui ili krai kod. U prvom sluaju, kada piete dui
kod, svakoj margini pojedinano dodeljujete vrednost, dok u drugom sluaju prvo broj (0)
oznaava veliinu gornje i donje margine (margin-top i margin-bottom) a drugi broj (auto)
oznaava vrednost leve i desne margine (margin-left i margin-right). Postoji mogunost da
se kod napie jo krae, npr. : margin: 0; to znai da su gornja, donja, leva i desna
margina 0px;

Vertikalno pozicioniranje elementa

Ono to esto zadaje najvee potekoe jeste vertikalno pozicioniranje. Ideja da kod
ispiemo isto kao i u prethodnom koraku, samo da postavimo vrednost gornje i donje
margine na auto nee raditi. Za to e nam ipak trebati malo matematike, ali nita
komplikovano.
Kao i u prvom primeru, kreiraemo div element:
<div id="rectangle"></div>
i dodeliti mu dimenzije i boju pozadine:
#rectangle {
width: 500px;
height: 300px;
background-color: grey;
}

Sada je doao red na pozicioniranje, koje se i dalje vri pomou margina, ali ovoga puta uz
pomo matematike. Vorumula je sledea:
margin-top= -(height/2), a top treba da bude 50%;
Zato tako?
Jednostavno je: Kada top postavimo na 50%, to znai da e se gornja ivica naeg
pravougaonika pozicionirati na polovinu ekrana (50%). to znai da e se ceo pravougaonik
nalaziti ispod polovine ekrana. Dakle, moramo da smanjimo (minus) marginu
pravougaonika za polovinu njegove visine (height/2)
U ovom sluaju, margin-top e iznositi -(300/2), tj. -150px.
I na kod izgleda ovako:
#rectangle {
width: 500px;
height: 300px;
background-color: grey;
position: relative;
top: 50%;
margin-top: -150px;
}

Kao to ste mogli da primetite, ova tehnika se primenjuje samo kada nam je poznata visina
elementa. Ipak, esto nam visina elementa nije poznata, i ne moemo je definisati, za ta
emo u nekom od narednih tutorijala iskoristiti JavaScript kako bismo vertikalno
pozicionirali element.
Do sledeeg tutorijala - pozdrav!