css - CSS メニューのセンタリング

Question

このメニューを中央に配置するのに問題があります。とを試着text-align:center;しました。何かを浮かせる必要があるのか​​ 、表示設定を変更する必要があるのか​​ わかりません<ul>margin:auto;

JSFiddle: http://jsfiddle.net/FQ3mK/

Answer 1

最初の方法: 以下<div>を使用してコンテナーを中央に配置しtext-align:centerます。

#navcontainer {
    text-align: center;   
}

ライブデモ: jsFiddle

---

2 番目の方法:コンテナーに固定幅を指定し、次<div>を使用しますmargin:auto。

#navcontainer {
    width: 600px;
    margin: auto;   
}

ライブデモ: jsFiddle

Answer 2

<ulmargin:auto は、コンテナー ( ) に固定幅を指定した場合にのみ機能します。

参照: http://jsfiddle.net/FQ3mK/3/

Answer 3

私もこれを調べていました。ここで最良の答えを見つけました: https://stackoverflow.com/a/17634702/2537445

これは、最も動的で、クロスブラウザーと互換性のある回答であるため、最高だと思います。

特定のアンカーに関しては、display: ブロックを使用することはできません。

ただし、インライン アンカーの左右にパディングを適用し、インライン Li の上下にパディングを適用して、必要な間隔を確保することができます。

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