Le style CSS peut réaliser un centrage horizontal, alors comment définir le centrage horizontal CSS ? Cet article partagera avec vous comment implémenter le centrage horizontal CSS.
En CSS, vous pouvez définir le centrage horizontal des éléments en ligne et le centrage horizontal des éléments au niveau du bloc. Les étudiants qui ne connaissent pas les éléments en ligne et les éléments au niveau du bloc peuvent se référer à Qu'est-ce que c'est. la définition des éléments de niveau bloc en CSS ? Quels sont les éléments CSS au niveau du bloc ? Quels sont les éléments CSS en ligne et ? La différence entre les éléments CSS au niveau du bloc et les éléments en ligneDans ces deux articles, regardons directement les deux paramètres de centrage horizontal en CSS.
Tout d’abord, jetons un coup d’œil au CSS pour définir le centrage horizontal des éléments en ligne.
Le premier type : les éléments CSS en ligne sont centrés horizontalement :
Syntaxe : div{text-align:center} /*Les éléments en ligne dans DIV seront centrés horizontalement* /
Explication simple : définissez le style text-align:center pour l'élément parent.
<div style="text-align: center"> <span>行内元素水平居中</span> </div>
Explication détaillée :
1.
2.
Texte
À ce stade, il est logique de centrer les deux mots "Texte" horizontalement, car p est un élément de niveau bloc, sa largeur occupe une ligne et le texte Il n'occupe qu'une largeur de deux caractères. À ce stade, définissez text-align:center pour l'élément p, puis les deux mots « texte » seront centrés horizontalement sur une seule ligne.
3.
Après avoir lu le centrage horizontal des éléments CSS en ligne, parlons du centrage horizontal des éléments CSS au niveau du bloc Le centrage horizontal des éléments CSS au niveau du bloc est divisé en centrage horizontal. des éléments de niveau bloc de largeur fixe et des éléments de niveau bloc de largeur variable sont centrés horizontalement. Examinons-les séparément ci-dessous.
Le deuxième type : l'élément CSS de niveau bloc à largeur fixe est centré horizontalement : c'est à la fois un élément de niveau bloc et un élément de largeur fixe.
Définissez les valeurs de marge gauche et droite des éléments au niveau du bloc qui doivent être centrés horizontalement sur auto
Par exemple :
<🎜 ; ><div> <div style="width: 100px;height: 100px;background-color: green;margin: 0 auto"> </div></div>
variable CSS Les éléments larges au niveau du bloc sont centrés horizontalement : éléments au niveau du bloc avec des largeurs variables
Par exemple : Ajouter des éléments au niveau du bloc. à la balise