62

私は次のhtmlを持っています:

<div id="footer">
    <ul id="menu-utility-navigation" class="links clearfix">
        <li class="menu-685 menu-site_map first">Site Map
        </li>
        <li class="menu-686 menu-privacy_policy">Privacy Policy
        </li>
        <li class="menu-687 menu-terms___conditions">Terms &amp; Conditions
        </li>
        <li class="menu-688 menu-contact_us last">Contact Us
        </li>
    </ul>
</div>

次の CSS を使用します。

div#footer {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 700px;
}

スタイルが機能しているかどうかを確認するためだけに、font-size ビットを投入しました (Firebug は機能していると報告していますが、確認したかったのです)。それは働いています。ただし、テキストは Firefox または Safari のフッターの中央に配置されません (IE ではまだ確認していません)。

私はマージンの有無にかかわらず試しました: 0 auto; text-align: center の有無にかかわらず。それらの組み合わせは機能しませんでした。

Firebug からの出力は次のとおりです。

div#footer {
    font-size: 10px;
    margin: 0 auto;
    text-align: center;
    width: 700px;
}

Inherited fromdiv#page
#skip-to-nav, #page {
    line-height: 1.5em;
}

Inherited frombody.html
body {
    color: #666666;
    font-family: verdana,arial,sans-serif;
}

ヘルプ？

4

7 に答える 7

46

すべてのアイテムを隣り合わせにして、全体を水平方向に中央に配置したいと思います。

li要素はdisplay: blockデフォルトで、すべての水平スペースを占有します。

追加

div#footer ul li { display: inline }

それが終わったら、おそらくリストの箇条書きを取り除きたいと思うでしょう:

div#footer ul { list-style-type: none; padding: 0px; margin: 0px }
于 2011-06-05T13:09:56.973 に答える
7

リスト項目内のテキストを中央揃えにしたい場合は、次を試してください。

ul#menu-utility-navigation {
  width: 100%;
}

ul#menu-utility-navigation li {
  text-align: center;
}
于 2011-06-05T13:10:33.073 に答える
2

それを使用display: block; margin: auto; すると、divが中央に配置されます

于 2020-01-24T13:51:19.140 に答える
-4

Bootstrapバージョンを使用していることはわかりませんが、要素を中央に配置してブロックするための便利なヘルパークラスは.center-block、このクラスにはCSSプロパティが含まれていますが、marginクラスにはプロパティのみが含まれているためですdisplay.text-centertext-align

ブートストラップ ヘルパー クラス センターブロック

于 2015-11-28T09:55:19.563 に答える