マージン0で自動中央揃えできないのはなぜですか？

130

ある#headerdivがあり100% width、その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>

html css margin

— ゼックデュード
ソース

どのブラウザを使用していますか？IE / Winはマージン自動にいくつかの問題があります。

— JD Frias、

なぜあなたもあなたのulを右に浮かせるのですか？それを取り出して、おそらくli：のfloat：leftも取り出してください。

— Simon

1

ナビゲーションバーを作成しています。私はulのためにフロートを右に取り出し、liのためにフロートを左に置きましたが、それは今ではすべてを左に置きます。

— zeckdude 2009年

135

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

#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;
}

— PatrikAkerstrand
ソース

2

ulの幅が動的になる場合はどうでしょうか。私は後でPHPでliに別のテキストを動的に挿入することを考えているので、それを予測しようとしています。

— zeckdude 2009年

2

そうです、マージンを使用して中央に配置することはできません：auto;

— PatrikAkerstrand 2009年

1

あなたの最新の提案を試しましたが、うまくいきませんでした。私が経験していることを確認できるように、推奨事項を含む最新バージョンを同じ場所にアップロードしています。ulはちょうど約50px右にプッシュされています。

— zeckdude 2009年

1

私の提案で言ったように、フロートを削除します：左

— PatrikAkerstrand 09年

1

うまくいきました！私に固執し、私を助けてくれて本当にありがとうございました！その問題は私を殺しています！再度、感謝します！

— zeckdude 2009年

43

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

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

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

— ホークス
ソース

非常に有益な提案をありがとう、私はインライン要素に同じ問題があり、なぜそれが機能しないのか理解できませんでした

— mastazi

これが最良の答えであり、マルチサイズのウィンドウで機能します。

— Yuda Prawira 2013

14

何故なの？

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
ソース

text-align：leftを追加しました。#header ulに移動してulを中央に配置し、li内のテキストを左揃えにします。また、幅を動的（自動）にするには、インラインブロックとして表示するようにulを設定する必要もありました。

— ブレントセルフ

3

最初の答えは最高の一つであり、なぜ私は知らない、私はそれを試してみましたが、実際には働いていない、kalys.osmonovが言った@として、あなたが与えることができるtext-align:centerにheaderはできますが、確認する必要がありますulようinline-blockではなくinline、また、あなたは通知に持っていますそれは、text-alignより良い方法（IE 9の下に動作していないが）使用しているので、ある程度の良いされていない継承することができますmarginとtransform。以下のようにfloat right、margin;0 autoから削除してulください：

#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 */
}

この方法は、ulIE8などを気にしない場合に動的な中心の幅を作成する問題を修正できます。

— ビル・ドゥ
ソース

0

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

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

— ヴァニS
ソース