固定幅の Div 内の順序なしリストを中央に配置するにはどうすればよいですか?

固定幅 DIV 内の順序なしリストを中央に配置する方法

Web デザインで作業する場合、要素を垂直方向と水平方向に整列させるのは一般的な作業となることがあります。そのようなシナリオの 1 つは、固定幅の div 内の順序なしリスト (

) を中央揃えにすることです。

解決策

中央揃えを実現するには、CSS 表示プロパティと要素内のラップ要素を組み合わせます。

まず、ラッパー div を作成し、それに text-align: center プロパティを適用します。これにより、コンテンツが div 内の水平方向の中央に配置されます。

次に、

をラップします。要素を中央の div 内に配置し、次の CSS プロパティを適用します。

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

• display: inline-block;: このプロパティでは、
  を使用できます。固定幅を占有しながらインライン要素のように動作します。
  • margin: 0; and padding: 0;: これらのプロパティは、
    に適用されているデフォルトのマージンまたはパディングを削除します。

    最後に、

  • を中央に配置します。
    内の項目には、次の CSS プロパティを適用します。

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

    • float: left;: このプロパティは、
    • のインライン レイアウトを作成します。項目。
    • パディング: 2px 5px;境界線: 1 ピクセルの黒一色。 (オプション): これらの値を調整して
    • のスタイルを設定します。

    これらの CSS テクニックを組み合わせることで、

    そしてその
    • 項目は固定幅の div 内で中央に配置され、視覚的に魅力的な配置になります。

    以上が固定幅の Div 内の順序なしリストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。