Još od početka kodiranja, pred dizajnerima i koderima je postojala nerazješiva dilema. Kako centrirati sliku?
Ova slika je centrirana koristeći CSS 1) (vidi dole)
Predstaviću vam nekoliko načina.
Uz HTML:
Budući da ne postoji opcija align=center za img tag, moramo se snalaziti na drugi način. Uzmimo za primer ovakvu sliku:
[html]<img src="/demo.png" alt="Slika"/>[/html]
Jedini način bi bio dodavanje p taga okolo, i dodavanje align=center atributa tom tagu, dakle:
[html]<p align="center"><img id="slika" src="/demo.png" alt="Slika" height="100px" width="100px"/></p>[/html]
Uz CSS i HTML:
Bilo bi fino da postoji float: center, ili float: both, ovako, moramo da se snalazimo.
1) Dodavanje margin: 0 auto; width: 100px, što omogućava pretraživaču da margine sa strana prikaže iste širine. Dakle:
U CSS-u bi izgledalo ovako:
[css]#slika { margin: 0 auto; width: 100px; }[/css]
i HTML-u ovako:
[html]<img id="slika" src="/demo.png" alt="Slika"/>[/html]
2) Pravljenje DIV taga u HTML-u i dodavanje centrirane pozadine tom DIV-u
HTML:
[html]<div id="slika"/>[/html]
CSS:
[css]#slika { background-picture: url(slika.png); background-position: center; width: 100px; height: 100px; }[/css]
Koji način ćete koristiti, na vama je.
