Comment centrer un élément horizontalement-Questions et réponses frontales-php.cn

Comment centrer un élément horizontalement

藏色散人

Libérer： 2020-07-02 10:55:30

original

4546 Les gens l'ont consulté

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.

Comment centrer un élément horizontalement

(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>

Copier après la connexion

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;}

Copier après la connexion

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

Copier après la connexion

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;}

Copier après la connexion

rrree

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

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

Copier après la connexion

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;}

Copier après la connexion

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!