Voici quelques options de titre, jouant avec le format de la question et mettant l'accent sur le problème/la solution : Direct et concis : * Comment centrer les frères et sœurs sans masquer les enfants en CSS ? * Comment puis-je prévenir

Réaliser le centrage des frères et sœurs sans masquer les enfants dans un parent Overflow:hidden

En CSS, la propriété overflow:hidden est couramment utilisée sur le parent conteneurs pour s'adapter à la taille de leurs enfants flottants. Cependant, il a également un effet intéressant lorsqu'il est combiné avec margin:auto.

Lorsqu'un conteneur avec overflow:hidden et margin:auto a un frère précédent qui flotte, il apparaît à côté de l'élément flottant. Cela permet un placement centré entre plusieurs frères et sœurs flottants.

Cependant, cette disposition peut être perturbée si les enfants doivent être visibles à l'extérieur du conteneur sans masquer les éléments flottants. La méthode traditionnelle pour rendre le conteneur overflow:visible ignore la disposition flottante, tandis que l'effacement:à la fois et l'expansion du conteneur perturbent le centrage frère.

Solution utilisant Clearfix

Pour maintenir la disposition centrée tout en permettant aux enfants d'être visibles à l'extérieur du conteneur, la méthode clearfix peut être utilisée. En ajoutant la classe clearfix au parent et en supprimant overflow:hidden, la mise en page peut être préservée sans masquer les enfants.

Le CSS pour clearfix est fourni ci-dessous :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!