Maison > Article > interface Web > Comment centrer un élément horizontalement

Comment centrer un élément horizontalement

藏色散人original: 2020-07-02 10:55:304507parcourir

Méthodes pour centrer horizontalement un élément : 1. Pour les éléments en ligne, vous pouvez utiliser l'attribut "text-align: center;" pour obtenir un centrage horizontal ; margin: 0 auto" attribut pour obtenir un centrage horizontal. Centré ; 3. Mis en œuvre via flex, définissez la direction de l'axe principal pour qu'elle soit centrée.

(1) Éléments en ligne (texte, Images, balises en ligne (span), balises de bloc en ligne (display：inline-block)) : text-align: center, ci-dessous prend span comme exemple :

<p class="father">
  <!-- 行内元素 -->
  <span class="son">hello</span> </p>

rrree

Avantages : Bonne compatibilité, simple

Inconvénients : text-alignIl est héritable et affectera les éléments descendants

(2) Éléments au niveau du bloc : margin：0 auto

.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  text-align: center;}

<!-- 相对于body居中 --><body>
  <!-- 块级元素 -->
  <p class="son"></p></body>

Avantages : Simple, bonne compatibilité

Inconvénients : La largeur doit être connue et plus petite que l'élément parent

(3)flexMise en œuvre, définissez la direction de l'axe principal au centre

.son {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;}

rrree

S'il y a plusieurs éléments , il peut être réglé sur :

 <p class="father">
   <span class="son"></span>
 </p>

Avantages : Pratique, peut réaliser une auto-adaptation

Inconvénients : Légèrement moins compatible, version PCIE10 et support supérieur

( 4) Implémentation du positionnement absolu : Zijue Parent

.father {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: center;}.son {
  width: 100px;
  background-color: turquoise;}

rrree

Avantages : Très peu d'avantages Vous pouvez utiliser le positionnement pour les éléments difficiles à centrer margin-left Meilleure compatibilité

Inconvénients : Hors du document. flux, beaucoup de code, compatibilité Légèrement pire, IE9以上 prend en charge transform et a besoin de connaître la valeur de la largeur.

Apprentissage recommandé : "Vidéo frontale"

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment nettoyer les flotteurs lorsqu'un conteneur contient plusieurs éléments flottantsArticle suivant：Comment nettoyer les flotteurs lorsqu'un conteneur contient plusieurs éléments flottants

Articles Liés

Voir plus