Div内でリストを水平方向に中央揃えするにはどうすればよいですか?

Div 内でリストを中央揃えにする方法

固定幅の div 内で項目のリストを中央揃えにすることが望ましい場合がよくあります。これは、HTML と CSS の手法を組み合わせて実現できます。

解決策:

リストとその子要素を中央に配置するには、次の手順を実行します。

1. text-align: center; を使用してリストを div でラップします。
2. Set表示: インラインブロック;
3. リストとその要素に適切なマージンとパディングを設定して、目的の結果を実現します。

コード:

<div class="wrapper">
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
    </ul>
</div>

.wrapper {
    text-align: center;
}

.wrapper ul {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.wrapper li {
    float: left;
    padding: 2px 5px;
    border: 1px solid black;
}

説明:

• ラッパーdiv はリストを水平方向に中央揃えにします。
• inline-blockリストに表示すると、水平方向にも div 内に配置されます。
• リストとリスト項目のマージンとパディングは、要素の間隔と外観を調整します。

次のようにします。手順に従って、リストを div 内で効果的に中央に配置し、バランスのとれた視覚的に魅力的なレイアウトを確保できます。

以上がDiv内でリストを水平方向に中央揃えするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。