Wie kann ich Elemente in einem div vertikal ausrichten?

Question

Ich habe eine div mit zwei Bildern und einem h1 . Alle müssen innerhalb des Divs vertikal nebeneinander ausgerichtet sein.

Eines der Bilder muss sein absolute positioniert innerhalb der div .

Welches CSS ist erforderlich, damit dies auf allen gängigen Browsern funktioniert?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

Answer 1

Wow, dieses Problem ist sehr beliebt. Es basiert auf einem Missverständnis in der vertical-align Eigentum. Dieser ausgezeichnete Artikel erklärt es:

Verstehen vertical-align oder "Wie man Inhalte (nicht) vertikal zentriert" von Gavin Kistner.

"Wie man in CSS zentriert" ist ein großartiges Webtool, das hilft, die notwendigen CSS-Zentrierungsattribute für verschiedene Situationen zu finden.

---

Kurz und bündig _{^{(und um Linkfäule zu verhindern)}} :

• Inline-Elemente (y nur Inline-Elemente) können in ihrem Kontext vertikal ausgerichtet werden über vertical-align: middle . Der "Kontext" ist jedoch nicht die gesamte Höhe des übergeordneten Containers, sondern die Höhe der Textzeile, in der sie sich befinden. jsfiddle-Beispiel
• Bei Blockelementen ist die vertikale Ausrichtung schwieriger und hängt stark von der jeweiligen Situation ab:
  • Wenn das innere Element eine feste Höhe können Sie seine Position bestimmen absolute und geben seine height , margin-top y top Position. jsfiddle-Beispiel
  • Wenn das zentrierte Element besteht aus einer einzigen Zeile et seine übergeordnete Höhe ist festgelegt können Sie einfach die Containereigenschaft line-height um seine Höhe auszufüllen. Diese Methode ist meiner Erfahrung nach recht vielseitig. jsfiddle-Beispiel
  • es gibt noch mehr solcher Sonderfälle.

Answer 2

Jetzt, wo die Flexbox-Unterstützung zunimmt, würde dieses CSS, das auf das enthaltende Element angewendet wird, alle enthaltenen Elemente vertikal zentrieren (mit Ausnahme der Elemente, die die Ausrichtung selbst festlegen, z. B. align-self:start )

.container {
    display: flex;
    align-items: center;
}

Verwenden Sie die vorangestellte Version, wenn Sie auch auf die Internet Explorer 10 , und älter (< 4.4 (KitKat)) Android-Browser:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

Answer 3

Ich habe diesen sehr einfachen Code verwendet:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

Natürlich ist es unerheblich, ob Sie eine .class oder ein #id wird sich das Ergebnis nicht ändern.

Answer 4

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Answer 5

Bei mir hat es funktioniert:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}