Comment centrer un bloc Div à largeur variable sans définir la largeur ?

Centrer un bloc Div à largeur variable sans définir la largeur

Centrer un bloc div sans connaître sa largeur peut être une tâche difficile. Ce problème survient généralement lorsqu'il s'agit de contenu dynamique, où le nombre et la taille des éléments dans le bloc sont susceptibles de changer.

Solution 1 : Utiliser Inline-Block et Text-Align

Une approche recommandée par @bobince consiste à utiliser le style CSS suivant :

.child {
  display: inline-block;
}
.parent {
  text-align: center;
}

Dans ce scénario, le div enfant se voit attribuer une propriété d'affichage en bloc en ligne, tandis que le div parent a son alignement de texte. mis au centre. Cela fait flotter le div enfant dans le div parent, ajustant automatiquement sa largeur pour s'adapter à son contenu. En centrant le div parent, le div enfant est effectivement centré dans son conteneur.

Solution 2 : Divs imbriqués avec positionnement relatif

Une autre solution consiste à imbriquer des divs dans le parent conteneur :

<div class="product_container">
  <div class="outer-center">
    <div class="product inner-center">
    </div>
  </div>
  <div class="clear"></div>
</div>

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}
.inner-center {
  float: right;
  right: -50%;
  position: relative;
}
.clear {
  clear: both;
}

Dans cette approche, les divs imbriqués sont flottants et positionnés à l'aide de la propriété right basée sur le pourcentage. Le div externe est défini au milieu du conteneur parent, tandis que le div interne est décalé de la moitié de sa propre largeur pour obtenir le centrage.

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!