ディスプレイを使用する：中央のメニューとインラインディスプレイ：ブロック

Question

各メニュー項目が可変幅である（横幅は要素の幅ではなくパッドで制御されます）、グラフィカルなナビゲーションメニューがあるとします。これは、テキストがブラウザによって異なるため、ulの幅を真に知ることができないことを意味します（中央に配置するため）。

私はどちらか

Aだろう今までは）ただ、目、それはとのmargin-left UL

B上を使用）が幅を計算するためにjqueryのを使用し、そのようにインラインスタイルとして設定し幅を設定することができますし、margin：auto'dとすることができます。

しかし、私はディスプレイを使うことができます：インラインで、フロートを使わずにうまく動作し、いつも中心になっています。誰かがこれについて聞いたことがありますか？彼は新種だし、それを説明できないので、あなたが思うものが好奇妙だ。彼はテキスト・アライメントを中心に考えていると言います。私はどのようにこれはメニューで動作するか分からない..テキストではない？

Answer 1

任意のテキストレベルの要素が中央することができます。親要素に従って中央に配置されます。ブロックレベル要素でなければなりません。

ul#ul{text-align:center;} 
ul#ul li{display:inline;} 

このCSSを使用

次のメニューを中心にすることができ

、

<ul id="ul"> 
<li>one</li> 
<li>two</li> 
<li>January</li> 
<li>September</li> 
</ul> 

は、CSSで何かを中心にするなど多くの方法がなどがあります。このjsfiddleアイデア

Answer 2

はdisplay:inlineまたはdisplay:inline-blockにulとli秒を設定し、text-align:centerにulのコンテナを設定します。 inline-blockで正常に動作するように、いくつかの古いバージョンのIEにはzoom:1を追加する必要があります。

は推奨読書​​：

• http://www.quirksmode.org/css/display.html
• http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/