html - margin: CSS3 の auto プロパティ

Question

私の HTML-5 コードの一部:

<header id="main">
    <a href="#" id="exit"></a>
    <a href="http://www.reddit.com/" id="reddit"></a>
    <a href="http://www.stackoverflow.com/" id="stackoverflow"></a>
    <a href="http://www.facebook.com/" id="facebook"></a>
    <a href="#" id="title"></a> 
</header>

CSS-3 コード:

#main{
    height: 220px;
    width: auto;
    border: 2px #000000 solid;
}

#title{
    float: left;
    background: url(title.jpg) no-repeat;
    padding: 90px 145px;
    margin: 20px auto;
    border: 2px #000000 solid;
}

視覚化を容易にするために、両方の ID に境界線を設定しました。タイトル画像が中央にない理由がわかりません。上記のコードから、次のようになります。

JSFiddle は次のとおりです: http://jsfiddle.net/5nWag/2/

Answer 1

を使用しているため、タイトル画像が中央に配置されていませfloat: left;んid="exit"。
でdivにfacebook、stack、redを入れてみてくださいposition: absolute;。次に、exit についても同じことを行います。

そして、これがメイン画像のスタイルになるはずです。

background: url(title.jpg) no-repeat;
padding: 90px 145px;
margin: 0 auto;
margin-bottom: 20px;
margin-top: 20px;
border: 2px #000000 solid;