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

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. 2e1cf0710519d5598b1f0f14c36ba674Texte2e1cf0710519d5598b1f0f14c36ba674Cela n'a aucun sens de centrer les deux mots "texte" horizontalement par rapport à l'étiquette ici. élément, et sa largeur est égale à la largeur du contenu, c'est-à-dire que les deux mots « texte » sont toujours centrés horizontalement.

2. e388a4556c0f65e1904146cc1a846beeTextee388a4556c0f65e1904146cc1a846beeÀ 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. dc6dce4a544fdca2df29d5ac0ea9906b2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674dc6dce4a544fdca2df29d5ac0ea9906b, comment centrer l'élément label horizontalement par rapport au div.

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 f5d188ed2c074f8b944552db028f98a1

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

2. Définissez le style d'élément au niveau du bloc display:inline, puis ajoutez le style text-align:center à l'élément parent.

<div style="text-align: center">
    <div style="display: inline">
        设置inline实现水平居中    
 </div></div>

3. Ajoutez un élément parent à l'élément de niveau bloc et définissez le style de l'élément parent sur style="float:left;position:relative;left:50%"; l'élément au niveau du bloc Le style de l'élément est style="float:left;position:relative;left:-50%"

<div style="float:left;position:relative;left: 50%">
    <div style="position: relative;left: -50%">
        设置relative实现水平居中
    </div>
</div>

Recommandations associées :

Centrage horizontal CSS résumé

Centrage vertical CSS et centrage horizontal_html/css_WEB-ITnose

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!