幅が不明な順序なしリストを水平方向に中央揃えにする方法は?

幅が不明な順序なしリストを水平方向に中央揃えする

順序なしリストとして表されるリンクのセットを含むフッターを作成する場合、多くの場合、リストをフッター div 内で水平方向の中央に配置することが望ましい。テキスト要素や幅がわかっている要素を中央揃えにするのは簡単ですが、幅が不明な順序なしリストを中央揃えにするのは困難です。

インライン リスト アイテム

リスト アイテムの場合インラインで表示できます。解決策は簡単です。

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

ブロック リスト項目

ただし、場合によっては、display: block; の使用が必要になる場合があります。リスト項目にあります。この場合、もう少し複雑な解決策が必要です。

<code class="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%; }</code>

この CSS は、順序なしリストをフッター div の中央に配置し、リスト内で水平方向に整列するようにリスト項目をオフセットします。

以上が幅が不明な順序なしリストを水平方向に中央揃えにする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。