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

Div 内の順序なしリストを水平方向に中央揃えにする

問題: CSS を使用して順序なしリスト (

) を div 内で水平方向に中央揃えにすると、チャレンジ。 「text-align: center」または左配置 (left: 50%) を使用してリストを整列させようとしましたが、失敗したことが判明しました。

目標: 目標は、 div内のリスト

解決策:

を中央に配置するにはdiv 内で要素を水平方向に配置するには、さまざまな CSS テクニックを使用できます。
1. max-width と margin:
   の最大幅を設定します。要素を追加し、「auto」の左右のマージンを追加して、親 div 内で自動的に中央に配置します。
   • display: inline-block および text-align:
2. display: table and margin: 前の手法と同様に、
   要素の表示を設定します。要素を「table」に追加し、「margin: auto」を適用して中央揃えにします。
   • position:Absolute、translateX、left: このメソッドでは、
     の位置を設定する必要があります。要素を「絶対」に設定し、left プロパティとtransform プロパティを使用して反対方向に 50% 移動し、水平方向に中央揃えにします。
     • Flexbox レイアウト: ディスプレイを設定してフレキシブル ボックス モジュールを利用します。親 div を「flex」に変更し、「justify-content: center」を適用して
       を中央に配置します。

コード例:

/* Solution 1: max-width and margin */
.container ul {
    max-width: 400px;
    margin: 0 auto;
}

/* Solution 2: display: inline-block and text-align */
.container-2 {
    text-align: center;
}

.container-2 ul {
    display: inline-block;
}

/* Solution 3: display: table and margin */
.container-3 ul {
    display: table;
    margin: 0 auto;
}

/* Solution 4: position: absolute, translateX, and left */
.container-4 ul {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Solution 5: Flexbox Layout */
.container-5 {
    display: flex;
    justify-content: center;
}

.container-5 ul {
    list-style-position: inside;
}

ログイン後にコピー

これらのソリューションのいずれかを CSS に適用すると、順序なしリストを効果的に内部の水平方向の中央に配置できます。 div コンテナ。

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