Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir le centrage horizontal en CSS ? Deux façons de définir le centrage horizontal en CSS

不言
Libérer: 2018-09-10 13:59:55
original
7366 Les gens l'ont consulté

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>
Copier après la connexion

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.