IEのCSSのメニューのセンターLI要素？

Question

私は未知の幅を持っているCSSのメニューを中心にする必要があります。私は解決策を見つけました。テーブルまたはディスプレイ：ディスプレイにULタグを設定することにより、インラインテーブルを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>を追加することで、とにかく削除した可能性が、あなたはまた、そこに明確な要素を持っている必要はありません。それがお役に立てば幸いです。