web-dev-qa-db-ja.com

マージン0で中央に配置できないのはなぜですか？

#headerである100% width divがあり、そのdiv内に順序付けられていないリストがあります。 margin: 0 autoを番号なしリストに適用しましたが、ヘッダーdivの中央に配置しません。

誰か教えてもらえますか？親divの幅を定義すると、順序付けられていないリストはmargin: 0 autoを中心に配置できるはずだと思いました。私は何が欠けていますか？

ここに私のコードがあります：

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>
htmlcssmargin
124
zeckdude

親要素ではなく、センタリングする要素の幅を定義する必要があります。

#header ul {
    margin: 0 auto;
    width: 90%;
}

編集：OK

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}
126
PatrikAkerstrand

インラインブロックは行全体（左から右）をカバーするため、ここでは左または右のマージンは機能しません。必要なのはブロックです。ブロックには左右の境界線があるため、マージンの影響を受ける可能性があります。

これは私にとってどのように機能するかです：

#content {
display: block;
margin: 0 auto;
}
41
Hoeks

何故なの？

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
13
kalys.osmonov

@ kalys.osmonovが言ったように、最初の答えが最高のものである理由がわかりません、実際に動作していません、text-align:centerをheaderに与えることができますが、ulをinlineではなくinline-blockとして作成する必要がありまた、text-alignを継承することもできますが、これはある程度良くないため、（IE 9の下で動作しない）より良い方法はmarginとtransformを使用することです。以下のように、ulからfloat rightとmargin;0 autoを削除するだけです：

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

この方法は、IE8などを気にしない場合にulの動的な幅を中央にするという問題を修正できます。

2
bill dou

Ulタグの幅を設定すると、中央に揃えられます。

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}
0
Vani S