Comment centrer un élément du milieu dans une disposition horizontale avec des largeurs de frères et sœurs inégales ?

Maintenir l'alignement central pour un élément du milieu avec des largeurs de frères et sœurs variées

Cette question aborde le défi de centrer un élément du milieu dans une disposition horizontale lorsque le la largeur de ses éléments latéraux peut varier. L'effet recherché est de garantir que l'élément du milieu reste centré même lorsque les éléments secondaires sont de taille inégale.

Pour y parvenir, une approche flexbox imbriquée est utilisée. Les règles CSS suivantes constituent le cœur de la solution :

.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; }

Dans le conteneur, chaque boîte reçoit un flex de 1, garantissant qu'elle partage proportionnellement l'espace disponible. Chaque boîte est ensuite affichée comme un conteneur flexible avec justifier-content: center pour centrer son contenu.

Pour la première boîte, une marge droite est appliquée à son élément enfant en utilisant margin-right: auto, et inversement, une marge gauche est appliquée à l'élément enfant de la dernière boîte en utilisant margin-left: auto. Cela permet aux marges de s'agrandir automatiquement, poussant le contenu vers leurs bords respectifs, alignant efficacement la boîte du milieu au centre.

Cette solution permet d'obtenir l'effet souhaité, en garantissant que l'élément du milieu reste centré quelle que soit la largeur de son boîtes de frères et sœurs. Il s'agit d'une solution purement CSS qui ne nécessite aucun script supplémentaire ni positionnement absolu.

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!