html - 画像の中央揃え - 補助 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

この投稿はあなたに役立つかもしれません

div をラップする必要がある理由と、div ラッパーなしでそれを行う方法を説明します (ただし、ブラウザーの互換性の問題がある可能性があります)。