Wie kann ich Elemente innerhalb eines Container-Div vertikal ausrichten?

Vertikale Elementausrichtung innerhalb eines Container-Div

Sie beabsichtigen, zwei Elemente innerhalb eines Container-Div vertikal auszurichten. Das Tutorial auf phrogz.net hat nicht zum gewünschten Ergebnis geführt. In diesem Artikel werden zwei effektive Methoden zum Erreichen einer vertikalen Ausrichtung untersucht.

Methode mit CSS Flexbox:

CSS Flexbox bietet eine effiziente Möglichkeit, Elemente vertikal zu zentrieren:

</p>
<h1>Container {</h1>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

Nach dem Login kopieren

}

Wenn die Flex-Richtung auf „Spalte“ eingestellt ist, werden Elemente vertikal gestapelt, während „justify-content: center“ und „align“ aktiviert sind -items: center' sorgt für die vertikale bzw. horizontale Zentrierung.

Methode mit CSS-Tabelle und Positionierung:

Diese Methode beinhaltet die Nutzung von Tabelleneigenschaften und absoluter Positionierung:

<br>body {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: table;
position: absolute;
height: 100%;
width: 100%;

Nach dem Login kopieren