Wie zentriere ich schwebende Elemente unbekannter Höhe vertikal?

Vertikal mittig ausgerichtete schwebende Elemente unbekannter Höhe

Problem:

Sie haben ein Containerelement, das zwei horizontal zentriert schwebende Elemente unterschiedlicher Höhe. Standardmäßig werden diese Floats an der Oberseite des Containers ausgerichtet. Wie können Sie sie vertikal zentrieren?

Antwort:

Eine direkte vertikale Ausrichtung von Floats ist nicht möglich, da sie bestimmten Ausrichtungsregeln unterliegen, die die Ausrichtung nach oben priorisieren. Sie können diesen Effekt jedoch erzielen, indem Sie die Regel ausnutzen, dass Floats in Elementen enthalten sein können, die einen neuen Blockformatierungskontext (BFC) erstellen.

Lösung:

1. Verpacken Sie jeden Float in ein Element auf Inline-Ebene mit display: inline-block. Dadurch entsteht ein BFC um den Float und ermöglicht eine vertikale Ausrichtung.
2. Verwenden Sie Vertical-Align, um die Inline-Block-Wrapper vertikal auszurichten.
3. Stellen Sie sicher, dass die Wrapper ausreichend breit sind, um ihren Inhalt aufzunehmen. da sonst Leerzeichen dazwischen entstehen können.

Beispiel:

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

/* Float wrappers */
#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>

<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></code>

Das obige ist der detaillierte Inhalt vonWie zentriere ich schwebende Elemente unbekannter Höhe vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!