Comment centrer un bloc Div avec du contenu généré dynamiquement ?

Centrer un bloc Div de taille dynamique

Problème :

Centrer un bloc div sans connaître sa largeur à l’avance peut être un défi. Les méthodes traditionnelles reposent sur des largeurs fixes, ce qui n'est pas réalisable lorsque le contenu est généré dynamiquement.

Solution 1 (recommandée) : approche en bloc en ligne

Utilisation de l'approche en ligne propriétés de bloc et d'alignement du texte, vous pouvez centrer les éléments dans un conteneur parent.

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

Cette approche centre l'élément enfant en fonction de son propre largeur, le rendant réactif au contenu dynamique.

Solution 2 : positionnement relatif imbriqué

Cette méthode utilise des divs imbriqués avec un positionnement relatif.

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

Le div externe est positionné à 50 % de la droite et le div interne est positionné à -50 % de la droite, centrant ainsi le contenu.

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!