Comment centrer un élément flexible dans un conteneur lorsqu'il est entouré d'autres éléments flexibles ?

Centrer un élément flexible dans un conteneur lorsqu'il est entouré d'autres éléments flexibles

Pour centrer un élément flexible dans un conteneur lorsqu'il est entouré d'autres éléments flexibles , considérez ce qui suit :

Méthodes conventionnelles

• Utilisation de justifier-contenu et margin : auto : Lorsqu'il y a une longueur totale égale de pliez les éléments des deux côtés de l'élément centré, ces propriétés peuvent l'aligner efficacement.

Approche alternative

• Contenir et équilibrer la longueur : Enveloppez l'élément centré dans un conteneur flexible séparé et assurez-vous que la longueur totale des éléments flexibles frères et sœurs est égale de chaque côté. Cela force l'élément centré à occuper l'espace restant et à s'aligner sur le centre.

Exemple de code

Dans l'exemple suivant, le h2 est correctement centré en utilisant l'approche alternative, garantissant une longueur totale égale des éléments de travée des deux côtés.

HTML :

<code class="html"><div class="container">
  <div>
    <span>I'm span 1</span>
    <span>I'm span 2</span>
    <span>I'm span 3</span>
  </div>
  <h2>I'm an h2</h2>
  <div>
    <span>I'm span 4</span>
    <span>I'm span 5</span>
    <span>I'm span 6</span>
  </div>
</div></code>

CSS :

<code class="css">.container {
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.container div {
  flex: 1 1 auto;
  text-align: center;
}

h2 {
  flex: 0 0 auto;
  margin: auto;
}</code>

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!