Défi :
Centrer un élément
Approche :
Étant donné que les propriétés d'alignement flexibles répartissent l'espace libre dans le conteneur, centrer un seul élément parmi des frères et sœurs inégaux est un défi sans mesures supplémentaires.
Considération :
Lorsque la longueur totale des éléments environnants est égale des deux côtés de l'article, le centrage devient possible.
Solution :
Enroulez le
<code class="html"><div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <div> <h2>I'm an h2</h2> </div> <div> <span>I'm span 3</span> </div> </div></code>
<code class="css">.container { display: flex; justify-content: center; align-items: center; } .container div { flex: 1 1 auto; // Equalize flex sizing text-align: center; } h2 { flex: 0 0 auto; // Prevent h2 from affecting flex sizing margin: auto; // Center within its container }</code>
Explication :
En définissant les propriétés de flexion du conteneur
Informations supplémentaires :
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!