兄弟の幅が等しくない水平レイアウトで中央の項目を中央に配置するにはどうすればよいですか?

兄弟幅が異なる中間項目の中央揃えを維持する

この質問は、水平レイアウト内で中間項目を中央揃えにするという課題に対処します。サイドアイテムの幅は異なる場合があります。望ましい効果は、両側の項目のサイズが異なる場合でも、中央の項目が確実に中央に配置されるようにすることです。

これを実現するには、ネストされたフレックスボックスのアプローチが採用されます。次の CSS ルールがソリューションの中核を形成します:

.container {
    display: flex;
}

.box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.box:first-child > div { margin-right: auto; }

.box:last-child > div { margin-left: auto; }

コンテナ内では、各ボックスに 1 の flex が与えられ、利用可能なスペースを比例的に共有します。各ボックスは、コンテンツの中央に justify-content: center を使用してフレックス コンテナとして表示されます。

最初のボックスでは、margin-right: auto を使用して子要素に右マージンが適用され、逆に、 margin-left: auto を使用して、左マージンが最後のボックスの子要素に適用されます。これにより、余白が自動的に拡大され、コンテンツがそれぞれの端に押し出され、中央のボックスが効果的に中央に配置されます。

このソリューションでは、目的の効果が得られ、ボックスの幅に関係なく中央のアイテムが中央に配置されたままになります。兄弟ボックス。これは、追加のスクリプトや絶対配置を必要としない純粋な CSS ソリューションです。

以上が兄弟の幅が等しくない水平レイアウトで中央の項目を中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。