IEのCSSメニューのLIの要素の中心？

Question

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

このソリューションはIEでは機能しませんでした。 HTML/CSSだけでIEで動作する別のソリューションはありますか？

私のコードをよく見たい場合は、貼り付けたhereです。

Answer 1

How about this? 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; 
} 

全部の鍵は基本的に<ul>要素にtext-align: center;をしていました。 display: table;のようなものを実際にやりたいことは決してありません。それはちょうどハッキーで、あなたが知っているように、すべてのブラウザで動作しません。この方法は浮動を避けるので、そこに明確な要素を入れる必要はありませんが、<ul>にoverflow: auto;を追加することで削除できます。それが役に立てば幸い。