1. ホーム
  2. css

[解決済み] CSS text-align: center; が中央揃えにならない。

2022-03-01 01:12:21

質問

以下のような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ではまだ確認していません)。

margin: 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;
}

ヘルプは?

解決するには?

すべての項目を隣り合わせにし、全体を水平方向に中央配置にしたいのでしょう。

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

を追加します。

div#footer ul li { display: inline }

を実行したら、おそらくリストの箇条書きを消したくなることでしょう。

div#footer ul { list-style-type: none; padding: 0px; margin: 0px }