Un bref aperçu de 4 idées pour utiliser CSS pour réaliser un centrage horizontal

Le centrage horizontal est un problème courant. Il semble qu’il existe de nombreux chemins et que tous les chemins mènent à Rome. Mais après une revue systématique, il s’articule en réalité autour de plusieurs idées. Cet article présentera 4 idées sur le centrage horizontal. Les amis intéressés peuvent se référer aux mots précédents

Le centrage horizontal est un problème souvent rencontré. Il semble qu’il existe de nombreux chemins et que tous les chemins mènent à Rome. Mais après une revue systématique, il s’articule en réalité autour de plusieurs idées. Cet article présentera 4 idées sur le centrage horizontal. Les amis intéressés peuvent s'y référer !

Idée 1 : Définir text-align:center dans l'élément parent pour centrer horizontalement l'élément en ligne

Le display de l'élément est défini sur inline-block, de sorte que les éléments enfants deviennent des éléments en ligne

[Note] Pour être compatible avec le navigateur IE7, vous pouvez utiliser display:inline;zoom :1 ; Obtenez l'effet de bloc en ligne

<style>   
.parent{text-align: center;}       
.child{display: inline-block;}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

Idée 2 : Définir marge : 0 implémente automatiquement le centrage horizontal des éléments au niveau du bloc

【1】Affichez le sous-élément sous forme de tableau pour créer le sous-élément -element élément au niveau du bloc En même temps, le tableau est également enveloppé et la largeur est agrandie par le contenu

[Remarque] Si vous souhaitez être compatible avec le navigateur IE7, vous pouvez modifier le. structure de l'enfant en 818fbd9ed5d2bf0044e6cee6956524cdDEMO069c56f0760ff4c133c755e97b4f8540

<style>   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

[2] Si l'élément enfant a une largeur fixe, vous peut utiliser le modèle de boîtepositionnement absolu 🎜> attribut pour obtenir l'effet de centrage si la largeur n'est pas définie, l'élément enfant est étiré

<style>   
.parent{   
  position: relative;   
}   
.child{   
 position: absolute;   
 left: 0;   
 rightright: 0;   
 margin: 0 auto;   
 width: 50px;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>

Trois idées : Réussir L'attribut de décalage du positionnement absolu permet d'obtenir un centrage horizontal
【1】 avec translation() déplacement
fonction
fonction de traduction Le pourcentage est relatif à sa propre largeur, donc left:50% combiné avec translateX(-50%) peut obtenir un effet centré
　[Remarque] Le navigateur IE9 ne prend pas en charge

<style>   
.parent{   
  position: relative;   
}   
.child{   
  position: absolute;   
  left: 50%;   
  transform:translateX(-50%);   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

【2】Avec relatif

L'attribut de décalage relatif est relatif à lui-même, car l'élément enfant a été défini sur absolu, donc si vous utilisez relatif, vous devez ajouter une couche de structure e388a4556c0f65e1904146cc1a846bee -element
[Note] Cette méthode est entièrement compatible, mais elle ajoute une structure html

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  position: relative;   
  left: -50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>

【3】Avec marge négative

Le pourcentage de marge est relatif au bloc contenant, donc une couche de structure e388a4556c0f65e1904146cc1a846bee Puisque la valeur par défaut de la largeur est auto, lorsqu'une marge négative est définie, la largeur augmentera également. Par conséquent, un traitement à largeur fixe est requis pour le moment
[Remarque] Bien qu'il soit entièrement compatible, il doit augmenter la structure de la page et le traitement à largeur fixe, de sorte que les scénarios d'application sont limités

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  width:50px;   
  margin-left:-50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>

Idée 4 : Utilisez le modèle de boîte flexible flex pour obtenir un centrage horizontal
　[Remarque] Le navigateur IE9 ne le fait pas support
【1】 Définir l'alignement de l'axe principal sur le conteneur évolutif jusify-content:center

<style>   
.parent{   
  display: flex;   
  justify-content: center;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>

[2] Définir la marge sur le scalable projet : 0 auto

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!