ホームページ > ウェブフロントエンド > CSSチュートリアル > 幅が不明な順序なしリストを水平方向に中央揃えにする方法は?

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

Mary-Kate Olsen
リリース: 2024-10-29 02:46:02
オリジナル
421 人が閲覧しました

How to Center an Unordered List of Unknown Width Horizontally?

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

順序なしリストとして表されるリンクのセットを含むフッターを作成する場合、多くの場合、リストをフッター 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート