Центрирование изображения - работает только с вспомогательным div

Question

У меня есть div, и я хочу добавить логотип в его середину. Если я пишу:

<div id="header"> 
    <img id="logo" src="img/logo.png" title="Logo" /> 
</div> 
#logo { 
    margin: 0 auto 0 auto; 
    width: 278px; 
} 

Ничего не происходит. Но если сделать специальный DIV для изображения, как это:

<div id="header"> 
    <div id = "logo"> 
     <img src="img/logo.png" title="Logo" /> 
    </div> 
</div> 
#logo { 
    margin: 0 auto 0 auto; 
    width: 278px; 
} 

Он работает, а изображение центрируется. Зачем?

Answer 1

Изображения встроены по умолчанию, поэтому они не будут уважать это margin: auto с места в карьер. То, что вы можете сделать (без дополнительного div), дает text-align: center #header.

Причина, по которой вспомогательный div работает, заключается в том, что вы обертываете изображение в div с одинаковыми размерами и являетесь блочным элементом, div будет уважать маржу auto и центр.

Answer 2

this post может дать вам некоторую помощь

Это объясняет вам, почему вам нужно обернуть DIV и как сделать это без сНа обертки (но можете иметь браузерный вопрос)