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

Question

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

0

У меня есть 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;
 }

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

Sorin 05 окт. 2013, в 19:07

Источник

1

Попробуйте добавить display: block в первый блок CSS.
ComFreek 05 окт. 2013, в 16:17

Теги:

html

css

2 ответа

Ещё вопросы

Попробуйте добавить display: block в первый блок CSS.

Brian · Answer 1 · 2013-10-05T13-44-00.000Z

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

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

Sean Zhao · Answer 2 · 2013-10-05T15-11-00.000Z

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

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