BLOG POČETNA
CSS
- UVOD U CSS
- CSS SELEKTORI
- CSS SVOJSTVA
  - border
    - border-radius
  - box
    - box-shadow
  - font
    - @font-face
  - text
    - text-shadow
- CSS TRIKOVI
  - Vertikalno pozicioniranje

Centriranje elemenata u sredinu po horizontali i verikali

Horizontalno cetriranje elemenata pomoću CSS-a

Centriranje nekog elementa po horizontali često se primenjuje. Centriranje po horizontali je i ranije (u većini slučajeva) bilo krajnje jednostavno. Ako je u pitanju tekst, to se prosto rešavalo CSS definicijom: text-align:center; Slika i još dosta elemenata (tagova) je mogla da se po horizontali postavi u sredinu ovom definicijom (<span>, <p>, <img>, <section>......).

Ali ako imamo div elemnt unutar drugog div-a, definicija text-align:center; delovaće na tekst unutar drugog div-a, ali ne i na sam div tag. Naime, ako nemamo definisanu širinu div-a on će zauzimati 100% raspoloživog prostora, a raspoloživ prostor mu je širina nadređenog odnosno roditeljskog elementa.

Ako mu definišemu neku širinu, koja je principijelno uvek manja ili ista kao širina roditeljskog elementa, div će zauzeti tu širinu, pozicionirajući se u levo, a ostali prostor će ostati prazan.

Ako ne želimo da ostatak prostora bude prazan, već da ga popunimo nekim drugim sadržajem, možemo dodati definiciju float:left: ili float:right;. Ovime pozicioniramo div element levo, odnosno desno i istovremeno oslobađamo ostatak prostora. Na žalost ne postoji definicija float:center...

Da bi smo ceo div element pozicionirali u sredinu roditeljskog elementa, moramo definisati levu i desnu marginu na auto: margin:0 auto; Cifra nula definisala je gornju i donju marginu na nulu, a definicija auto, postavlja div tako da udaljenost od leve i desne granice raspoloživog prostora budu iste. Time smo ovaj div element pozicionirali u sredinu po horizontali. Za ovakav slučaj uvek se mora definisati širina (width:) div elementa.

Pogledajte ovaj primer u donjem editoru i eksperimentište malo, pa će Vam sve biti mnogo jasnije.

                                            CSS i HTML                                                                                                             Rezultat

Uočite da smo kod ponovnog postavljanja prvog div-a upotrebili još jednu klasu: .clear:both. Upotreba clear:both, gotovo je uvek neophodna kada iznad imamo pozicioniranje elemenata sa float. Pokušajte izbrisati klasu .clear pa ćete videti kao će se izgled potpuno poremetiti.

Vertical align - Vertikalno pozicioniranje

U prethodnim primerima videli smo kako se neki element može postaviti u sredinu po horizontali. Ali pozicioniranje u sredinu po vertikali je sasvim drugi problem. U CSS-u postoji definicija vertical-align:middle; ali ona kod samo nekih elemenata pozicionira sadržaj po vertikali u sredinu.

p, img {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

Postoji mogućnost da neki element pozicioniramo u sredu na taj način što ćemo ga udaljiti od gornje ivice za određeni broj piksela (sa margin-top;) i na taj način dovesti do sredine. Da bi to bilo efikasno, moramo znati tačnu visinu roditeljskog elementa, kao i tačnu visinu elementa koji pozicioniramo. Kada su u pitanju elementi različitih visina, što je i najčešći slučaj, ovo rešenje ne pomaže.

Rešenje daje CSS3 i to samo u 3 linije koda. Prvi korak je da roditeljskom elementu (pored ostalih definicija) dodelimo definiciju transform-style:preserve-3d;. Ovo svojstvo roditeljskog elementa određuje da element koju mu pripada, sačuva svoju 3D poziciju.

Drugi korak je dodavanje kod-a koji vidite u desnom boksu. Vi ovaj kod dodelite elementu na koji se odnosi, a mi smo samo radi ilustracije odredili da sve slike i svi <p> elementi imaju to svojstvo.

U donjem editoru je nekoliko primera sa kojima možete eksperimentisati.

                                            CSS i HTML                                                                                                             Rezultat