Un bref aperçu de 4 idées pour utiliser CSS pour réaliser un centrage horizontal-tutoriel CSS-php.cn

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>

Copier après la connexion

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

DEMO< /table>

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

Copier après la connexion

[2] Si l'élément enfant a une largeur fixe, vous peut utiliser le modèle de boîte< de positionnement 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>

Copier après la connexion

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>

Copier après la connexion

【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

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

Copier après la connexion

【3】Avec marge négative

Le pourcentage de marge est relatif au bloc contenant, donc une couche de structure

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>

Copier après la connexion

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>

Copier après la connexion

[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!

Étiquettes associées：

css水平居中

source：php.cn

Article précédent：Utilisez CSS pour obtenir un effet d'habillage du texte sur les images Article suivant：Utilisez CSS3 pour réaliser une conception d'effet d'ombre de texte en constante évolution

Déclaration de ce site Web

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

Derniers articles par auteur