Comment centrer une boîte du milieu entre des boîtes latérales de taille inégale en utilisant uniquement CSS ?

Garder l'élément du milieu centré au milieu d'éléments latéraux inégaux

Introduction

Lors de la conception de mises en page impliquant des boîtes côte à côte de largeurs variables, une règle courante Le défi est de maintenir le centrage de la boîte du milieu. Cet article explore une solution CSS pour obtenir cet effet.

Solution CSS utilisant Flexbox

Pour centrer la boîte du milieu quelle que soit la largeur des boîtes latérales, nous pouvons exploiter la flexbox et les marges automatiques :

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

Fonctionnalités clés

• CSS pur : Aucune bibliothèque supplémentaire ou JavaScript sont requis.
• Pas de positionnement absolu :Les éléments sont positionnés à l'aide de flexbox, éliminant ainsi le besoin d'un positionnement absolu.
• Alignement dynamique :Le la case du milieu reste centrée quelle que soit la largeur des cases latérales.

Mise en œuvre Détails

• Le .container est une flexbox qui enveloppe les trois éléments .box.
• Chaque .box est également une flexbox, avec justifier-content: center pour aligner son contenu interne horizontalement .
• flex : 1 fait grandir chaque .box pour remplir l'espace disponible de manière égale.
• Les marges sur les éléments intérieurs garantissent que les bords des boîtes latérales touchent toujours les bords de leurs conteneurs.
• Les marges automatiques s'agrandissent ou se rétrécissent si nécessaire pour maintenir l'alignement centré de la boîte du milieu.

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!