Kako centrirati sliku (HTML/CSS)?

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:

<img src="/demo.png" alt="Slika"/>

Jedini način bi bio dodavanje p taga okolo, i dodavanje align=center atributa tom tagu, dakle:

<p align="center"><img id="slika" src="/demo.png" alt="Slika" height="100px" width="100px"/></p>

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:

#slika { margin: 0 auto; width: 100px; }

i HTML-u ovako:

<img id="slika" src="/demo.png" alt="Slika"/>

2) Pravljenje DIV taga u HTML-u i dodavanje centrirane pozadine tom DIV-u

HTML:

<div id="slika"/>

CSS:

#slika { background-picture: url(slika.png); background-position: center; width: 100px; height: 100px; }

Koji način ćete koristiti, na vama je.