Comment écrire du code de centrage HTML

Le centrage HTML est une méthode de mise en page souvent utilisée dans la conception Web, et la méthode de mise en œuvre est relativement simple. Cet article présentera en détail plusieurs méthodes pour réaliser le centrage HTML et l'implémentation du code correspondante.

1. Centrage horizontal

1. Utilisez l'attribut text-align pour obtenir un centrage horizontal

Définissez l'attribut text-align sur center dans l'élément parent pour obtenir un centrage horizontal de ses éléments internes. Par exemple :

<div style="text-align:center;">
    <p>这里是居中文本</p>
</div>

De cette façon, le texte intérieur sera affiché horizontalement centré dans l'élément parent.

2. Utilisez l'attribut margin pour obtenir un centrage horizontal

Ajoutez l'attribut margin à l'élément qui doit être centré et définissez les valeurs de marge gauche et droite sur auto pour obtenir un centrage horizontal de l'élément. Par exemple :

<div style="width:300px;margin:auto;">
    <p>这里是居中文本</p>
</div>

De cette façon, l'élément div sera affiché horizontalement et centré dans l'élément parent.

3. Utilisez flexbox pour obtenir un centrage horizontal

Définissez l'attribut display sur flex et l'attribut justifier-content sur center dans l'élément parent pour obtenir un centrage horizontal de ses éléments internes. Par exemple :

<div style="display:flex;justify-content:center;">
    <p>这里是居中文本</p>
</div>

De cette façon, le texte intérieur sera affiché horizontalement centré dans l'élément parent.

2. Centrage vertical

1. Utilisez l'attribut vertical-align pour obtenir un centrage vertical

Dans l'élément qui doit être centré verticalement, ajoutez l'attribut display à table-cell et l'attribut vertical-align au milieu pour obtenir centrage vertical de l'élément. Par exemple :

<div style="display:table-cell;vertical-align:middle;">
    <p>这里是居中文本</p>
</div>

De cette façon, l'élément div sera centré verticalement au sein de l'élément parent.

2. Utilisez flexbox pour obtenir un centrage vertical

Définissez l'attribut display sur flex, l'attribut align-items sur center et l'attribut height sur 100% dans l'élément parent pour obtenir un centrage vertical de ses éléments internes. Par exemple :

<div style="display:flex;align-items:center;height:100%;">
    <p>这里是居中文本</p>
</div>

De cette façon, le texte intérieur sera centré verticalement dans l'élément parent.

3. Centrage horizontal et vertical

1. Utilisez les attributs text-align et vertical-align pour obtenir un centrage horizontal et vertical

Définissez l'attribut text-align sur center et l'attribut display sur table-cell dans l'élément parent, et définissez l'attribut text-align sur center et l'attribut display sur table-cell si nécessaire. Définissez l'attribut vertical-align sur middle sur l'élément centré pour centrer l'élément horizontalement et verticalement en même temps. Par exemple :

<div style="display:table-cell;text-align:center;vertical-align:middle;">
    <p>这里是居中文本</p>
</div>

De cette façon, l'élément div sera centré horizontalement et verticalement au sein de l'élément parent.

2. Utilisez flexbox pour obtenir un centrage horizontal et vertical

Définissez l'attribut display sur flex, l'attribut align-items sur center, l'attribut justification-content sur center et l'attribut height sur 100% dans l'élément parent pour obtenir un centrage horizontal. et centrage vertical des éléments internes en même temps. Par exemple :

<div style="display:flex;align-items:center;justify-content:center;height:100%;">
    <p>这里是居中文本</p>
</div>

Ci-dessus sont plusieurs méthodes spécifiques et implémentations de code correspondantes pour réaliser le centrage horizontal et vertical du HTML. Dans les applications pratiques, les méthodes appropriées doivent être sélectionnées en fonction des besoins pour rendre la mise en page Web plus belle et plus pratique. Dans le même temps, vous devez éviter d’abuser des styles en ligne et gérer les feuilles de style de manière unifiée pour améliorer la lisibilité et la maintenabilité du code.

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!