web-dev-qa-db-ja.com

幅が不明な順序付けられていないリストを水平方向に中央揃えするには？

次のようなリストで表されるフッターに一連のリンクがあるのが一般的です。

<div id="footer">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Div＃footer内のすべてを水平方向の中央に配置します。段落であれば、p { text-align: center; }と簡単に言うことができます。または、<ul>の幅がわかっていれば、#footer ul { width: 400px; margin: 0 auto; }とだけ言うことができます。

しかし、<ul>に固定幅を設定せずに、順序付けられていないリスト項目をどのように中央揃えにしますか？

編集：明確化-リスト項目は下ではなく、隣り合っている必要があります。

htmlcsscentering
69
philfreo

リストアイテムがdisplay: inlineになり得る場合の解決策は非常に簡単です。

#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }

ただし、display:blocksで<li>を何度も使用する必要があります。この場合、次のCSSが機能します。

#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }
164
philfreo

以下のCSSを使用して問題を解決してください

#footer{ text-align:center; height:58px;}
#footer ul {  font-size:11px;}
#footer ul li {display:inline-block;}

注：liではfloat:leftを使用しないでください。あなたのliを左揃えにします。

34
Yuvaraj

もう1つのソリューション：

#footer { display:table; margin:0 auto; }
#footer li { display:table-cell; padding: 0px 10px; }

テキストをズームする場合、ulは次の行にジャンプしません。

12
Andrey

リスト項目が前の項目の下にあるか、前の項目の右にあるかによって異なります。

Home
About
Contact

または

Home | About | Contact

最初にできるのは、次のことだけです：

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }

2番目は次のように実行できます。

#wrapper { width:600px; background: yellow; margin: 0 auto; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline; }
#footer a { padding: 2px 12px; background: orange; text-decoration: none; }
#footer a:hover { background: green; color: yellow; }
8
cletus

リストをdivでラップして、そのdivにリストではなくインラインプロパティを指定してみてください。

2
Martin Dale Lyness

Philfreoの答えは素晴らしく、完璧に機能します（クロスブラウザ、IE 7+）。 li内にアンカータグのexpを追加するだけです。

#footer ul li { display: inline; }
#footer ul li a { padding: 2px 4px; } /* no display: block here */

#footer ul li { position: relative; float: left; display: block; right: 50%; }
#footer ul li a {display: block; left: 0; }
0
Jacky Nguyen