ここでは、質問形式を試し、問題/解決策を強調するタイトルのオプションをいくつか示します。 直接的かつ簡潔: * CSS で子をマスクせずに兄弟を中央に配置するにはどうすればよいですか? *どうすれば防ぐことができますか

Overflow:hidden の親で子をマスクせずに兄弟中心化を実現する

CSS では、overflow:hidden プロパティが親でよく使用されます。浮遊する子の高さに対応するコンテナ。ただし、margin:auto と組み合わせると興味深い効果もあります。

overflow:hidden と margin:auto を持つコンテナにフローティングされた以前の兄弟がある場合、その兄弟はフローティング要素に隣接して表示されます。これにより、複数のフローティング兄弟間の中央配置が可能になります。

ただし、フローティング要素をマスクせずに子をコンテナの外に表示する必要がある場合、このレイアウトが崩れる可能性があります。コンテナーを overflow:visible にする従来の方法では float レイアウトが無視されますが、clearing:both を実行してコンテナーを展開すると、兄弟のセンタリングが中断されます。

Clearfix を使用した解決策

中央のレイアウトを維持しながら、子がコンテナの外側に表示されるようにするには、clearfix メソッドを使用できます。 clearfix クラスを親に追加し、overflow:hidden を削除すると、子をマスクせずにレイアウトを維持できます。

clearfix の CSS は以下に提供されます:

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

以上がここでは、質問形式を試し、問題/解決策を強調するタイトルのオプションをいくつか示します。 直接的かつ簡潔: * CSS で子をマスクせずに兄弟を中央に配置するにはどうすればよいですか? *どうすれば防ぐことができますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。