margine: 0 auto non funziona solo in IE

Sto cercando di centrare un div #logo_alt contenente un’immagine usando il margin: 40px auto 0px auto; .

Problema: su Chrome, sembra perfetto, ma in IE, questo div contenente img è allineato a sinistra del contenitore principale #header_organizer . Non riesco a capire perché questo sta accadendo, e come può essere risolto in IE! Qualsiasi aiuto molto apprezzato 🙂

HTML

 
...
...
<!-- <<<<

CSS

 #header_organizer { width: 100%; height: 180px; background: black url(../images/template/header.png); float: left; position: relative; z-index: 1000; } #logo_alt { width: 256px; height: 55px; margin: 40px auto 0px auto; } #user_bar { height: 30px; color: #CCC; font-size: 13px; margin-right: 10px; padding: 0px 5px; float: right; cursor: pointer; position: relative; z-index: 3000; } #user_bar_menu { width: 200px; height: 165px; background: white; border: 1px solid #BEBEBE; float: right; position: absolute; top: 30px; right: 10px; -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2); box-shadow: 0 2px 4px rgba(0,0,0,.2); display: none; z-index: 1000; border-image: initial; } 

Il file HTML inizia con .

Bene, c’è il tuo problema. È necessario fornire al documento una dichiarazione doctype XHTML poiché l’elemento root ha comunque xmlns . Quindi IE funzionerà in modalità standard e renderà il tuo margin: 0 auto stile margin: 0 auto correttamente.

In primo luogo, aggiungi un doctype per evitare che IE scivoli di più in stranezze.

Quindi prova questo …

 body { width: 100%; }