Immagine orizzontale allineamento CSS

Question

Ho qualche problema nell'allineare un'immagine principale. Dovrebbe essere allineato al centro orizzontalmente, ma continua ad andare ovunque. La pagina può essere trovato qui http://0034.eu/propmanager/

<img src="images/background-space.png" class="displayed" border="0" /> 

IMG.displayed{ 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
} 

Questo è fondamentalmente il CSS ho applicato all'immagine, tutto il codice sorgente è in index.html principale (senza foglio di stile separato).

Answer 1

Aggiungi display: block;

img.displayed{ 
    display: block; 
    margin:0 auto; 
} 

DEMO

Answer 2

aggiungere questo al vostro stile CSS.

img.displayed { 
    display: table-caption; 
    margin: 0 auto; 
} 

EDIT

dagli ingressi IlyaStreltsyn, concordo con il punto di clearing del right con display:block per l'immagine da centrata.

per esempio,

img.displayed { 
    display: block; 
    margin: 0 auto; 
    clear: right; 
} 

Answer 3

blocchi in linea (come appena inlines, che sono le immagini di default) partecipano nel contesto di formattazione in riga, non contesto di formattazione a blocchi. Ecco perché non obbediscono a (che in pratica significa margin: 0 per loro), ma obbediscono allo text-align del loro elemento di blocco antenato.

Answer 4

controllo del Fiddle here con i CSS e il codice

#header { 
    text-align:center; 
} 
img.displayed{ 
    display: block; 
    margin:0 auto; 
} 

<div id="header"> 
<img src="http://www.0034.eu/propmanager/images/background-space.png" class="displayed" border="0" width="100" height="100"/> 
</div>