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

Alle müssen innerhalb des div vertikal ausgerichtet sein

Ausgerichtet comment ? Sind die Oberseiten der Bilder am oberen Rand des Textes ausgerichtet?

Eines der Bilder muss innerhalb des Divs absolut positioniert werden.

Absolut relativ zum DIV positioniert? Vielleicht könnten Sie skizzieren, wonach Sie suchen...?

fd hat beschrieben die Schritte zur absoluten Positionierung, sowie die Anpassung der Anzeige der H1 Element, so dass die Bilder inline mit ihm erscheinen. Ich möchte noch hinzufügen, dass Sie die Bilder mit Hilfe der Option vertical-align Stil:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

...dies würde die Kopfzeile und die Bilder zusammensetzen, wobei die oberen Kanten ausgerichtet wären. Es gibt auch andere Ausrichtungsoptionen; siehe die Dokumentation . Es könnte auch von Vorteil sein, das DIV fallen zu lassen und die Bilder innerhalb des H1 Element - dies verleiht dem Container einen semantischen Wert und beseitigt die Notwendigkeit, die Anzeige des H1 :

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

Answer 2

Drei Möglichkeiten, ein zentrales untergeordnetes Div in einem übergeordneten Div zu erstellen

• Verfahren zur absoluten Positionierung
• Flexbox-Verfahren
• Transformations-/Translationsmethode

Demo

/* Absolute Positioning Method */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* Flexbox Method */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* Transform/Translate Method */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Answer 3

Mein Trick ist, eine Tabelle innerhalb des div mit einer Zeile und einer Spalte zu setzen, 100% der Breite und Höhe zu setzen und die Eigenschaft Vertikal-Ausrichtung:Mitte :

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiedel: http://jsfiddle.net/joan16v/sbqjnn9q/

Answer 4

Bei der Verwendung von Display Flex müssen Sie zunächst den Container des Elements, das Sie ausrichten möchten, umbrechen:

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

Wenden Sie dann den folgenden CSS-Inhalt auf den Umbruch an div o outdiv in meinem Beispiel:

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

Answer 5

Wenn Sie CSS zur vertikalen Zentrierung verwenden, können Sie die äußeren Container wie eine Tabelle und den Inhalt wie eine Tabellenzelle wirken lassen. In diesem Format bleiben Ihre Objekte zentriert :)

Ich habe mehrere Objekte in JSFiddle verschachtelt, um ein Beispiel zu geben, aber die Kernidee ist wie folgt:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

.circle {
  /* Act as a table so we can center vertically its child */
  display: table;
  /* Set dimensions */
  height: 200px;
  width: 200px;
  /* Horizontal center text */
  text-align: center;
  /* Create a red circle */
  border-radius: 100%;
  background: red;
}

.content {
  /* Act as a table cell */
  display: table-cell;
  /* And now we can vertically center! */
  vertical-align: middle;
  /* Some basic markup */
  font-size: 30px;
  font-weight: bold;
  color: white;
}

Das Beispiel für mehrere Objekte:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Ergebnis

https://jsfiddle.net/martjemeyer/ybs032uc/1/