Div 内で順序なしリスト (``) を中央に配置するにはどうすればよいですか?

ul を div の中心に水平方向に揃える方法

CSS を使用して div 内の順序なしリスト (

) を中央揃えにする場合、いくつかの方法があります。この課題に取り組むためのソリューション。以下に、提供される CSS の内訳と、目的の結果を達成するための推奨方法を示します。

指定された CSS:

.container { 
    clear: both; 
    width: 800px; 
    height: 70px; 
    margin-bottom: 10px;
    text-align: center;
}

.container ul { 
    padding-left: 20px; 
    margin: 0; 
    list-style: none;
}

.container ul li { 
    margin: 0; 
    padding: 0; 
}

プロパティ text-align: center; を使用します。 .container に適用すると、ul を含むすべてをコンテナ内の中央に配置することを目的としているようです。ただし、このプロパティは、要素自体ではなく、要素のテキスト コンテンツを配置するだけです。

div 内で UL を水平方向に中央揃えにするいくつかの方法を次に示します。

解決策 1: を使用するmargin's auto:

このメソッドには、マージンの設定が含まれます: 0 auto; UL にマージンを対称的に適用して、効果的に中央に配置できるようにします。

.container ul {
    margin: 0 auto;
}

解決策 2: display: table;:

This を使用します。このソリューションでは、表示プロパティのテーブル レンダリング モードを利用します。表示を設定することで: テーブル; ul では、テーブル コンテナーに変換します。次に、マージン: 0 auto;解決策 1:

.container ul {
    display: table;
    margin: 0 auto;
}

解決策 3: text-align: center; の実装と同じ方法で、div 内で UL が中央に配置されます。および inline-block:

このメソッドは表示を利用します。 ULのプロパティ。 text-align:center;と組み合わせると、親コンテナでは、テキスト フロー内のインライン要素として ul が中央に配置されます:

.container { 
    text-align: center;
}

.container ul { 
    display: inline-block;
}

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