html - IEのCSSメニューでLI要素を中央に配置しますか?

Question

幅が不明な CSS メニューを中央揃えにする必要があります。解決策を見つけました。UL タグを display:table または display:inline-table に設定すると、LI 要素を中央に配置できます。

このソリューションは IE では機能しませんでした。HTML / CSS のみを使用して、IE で動作する別のソリューションはありますか?

私のコードをよく見たい場合は、ここに貼り付けました。

Answer 1

これはどう？IE6、IE7、Firefoxで動作します。

マークアップ：

<div id='menu-centered'>
    <ul>
        <li><a href="">My first item</a></li>
        <li><a href="">My second item</a></li>
        <li><a href="">My third item</a></li>
        <li><a href="">My fourth item</a></li>
        <li><a href="">My fifth item</a></li>
    </ul>
</div>

CSS：

#menu-centered {
    background-color: #0075B8;
    padding: 10px;
    margin: 0;
}

#menu-centered ul {
    text-align: center;
    padding: 0;
    margin: 0;
}

#menu-centered li {
    display: inline;
    list-style: none;
    padding: 10px 5px 10px 5px;
}

#menu-centered a {
    font: normal 12px Arial;
    color: #fff;
    text-decoration: none;
    padding: 5px;
    background: #57a8d6;
}

#menu-centered a:hover {
    background: #5fb8eb;
}

全体の鍵は、基本的text-align: center;に<ul>要素に対して行うことでした。また、あなたは本当に次のようなことをしたくはありませんdisplay: table;-それはただのハックであり、あなたが知っているように、すべてのブラウザで動作するわけではありません。この方法ではフローティングが回避されるため、クリア要素をそこに含める必要はありませんが、に追加することでクリア要素を削除することもできoverflow: auto;ます<ul>。それが役に立てば幸い。