Wie zentriere ich einen Div-Block mit variabler Breite, ohne die Breite festzulegen?

Zentrieren eines Div-Blocks mit variabler Breite, ohne die Breite festzulegen

Das Zentrieren eines Div-Blocks ohne Kenntnis seiner Breite kann eine herausfordernde Aufgabe sein. Dieses Problem tritt typischerweise beim Umgang mit dynamischen Inhalten auf, bei denen sich die Anzahl und Größe der Elemente innerhalb des Blocks ändern kann.

Lösung 1: Verwendung von Inline-Block und Text-Align

Ein von @bobince empfohlener Ansatz beinhaltet die Verwendung des folgenden CSS-Stils:

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

In diesem Szenario wird dem untergeordneten Div eine Inline-Block-Anzeigeeigenschaft zugewiesen, während das übergeordnete Div seine Textausrichtung hat auf Mitte stellen. Dadurch verschiebt sich das untergeordnete Div innerhalb des übergeordneten Div und passt seine Breite automatisch an den Inhalt an. Durch die Zentrierung des übergeordneten Divs wird das untergeordnete Div effektiv in seinem Container zentriert.

Lösung 2: Verschachtelte Divs mit relativer Positionierung

Eine andere Lösung besteht darin, Divs innerhalb des übergeordneten Divs zu verschachteln Container:

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

Bei diesem Ansatz werden die verschachtelten Divs schwebend dargestellt und mithilfe der prozentualen rechten Eigenschaft positioniert. Das äußere Div wird auf den Mittelpunkt des übergeordneten Containers gesetzt, während das innere Div um die Hälfte seiner eigenen Breite versetzt wird, um eine Zentrierung zu erreichen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Div-Block mit variabler Breite, ohne die Breite festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!