Comment puis-je aligner verticalement des éléments dans une division de conteneur ?

Alignement vertical des éléments dans un conteneur Div

Vous avez l'intention d'aligner deux éléments verticalement dans un conteneur div. Le tutoriel sur phrogz.net n'a pas donné le résultat souhaité. Cet article explore deux méthodes efficaces pour obtenir un alignement vertical.

Méthode utilisant CSS Flexbox :

CSS Flexbox fournit un moyen efficace de centrer les éléments verticalement :

<h1 id="conteneur">conteneur {</h1><pre class="brush:php;toolbar:false">display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

}

Avec flex-direction défini sur "column", les éléments s'empilent verticalement, tandis que "justify-content: center" et "align -items: center' assure respectivement le centrage vertical et horizontal.

Méthode utilisant CSS Tableau et positionnement :

Cette méthode consiste à exploiter les propriétés du tableau et le positionnement absolu :

<br>body {<pre class="brush:php;toolbar:false">display: table;
position: absolute;
height: 100%;
width: 100%;

}

conteneur {

display: table-cell;
vertical-align: middle;

}

Ici, l'élément body est défini comme un tableau et l'élément conteneur est une cellule de tableau. Le réglage de « vertical-align » sur « middle » aligne le conteneur verticalement dans le corps.

Quelle méthode choisir :

Pour plus de simplicité et d'efficacité, Flexbox est recommandé, notamment en raison de ses larges options de mise en page et de sa nature réactive. Flexbox est également largement pris en charge par les navigateurs, à l'exception des anciennes versions d'IE.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!