Comment centrer l'alignement CSS

En CSS, l'alignement central est un problème courant. Il existe de nombreuses façons d’obtenir un alignement central, et cet article en présentera quelques-unes.

1. Centrer le texte d'alignement

Pour aligner le texte horizontalement, vous pouvez utiliser la méthode suivante :

text-align: center;

Cela centrera tout le texte de l'élément horizontalement, mais pas verticalement.

Pour aligner verticalement le texte, vous pouvez utiliser la méthode suivante :

display: flex;
align-items: center;
justify-content: center;

Cela utilisera Flexbox pour centrer verticalement et horizontalement tout ce qui se trouve dans l'élément.

2. Centrer les éléments au niveau du bloc d'alignement

Supposons que nous souhaitions centrer un élément div horizontalement et verticalement, voici comment procéder :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Cela centrera l'élément en positionnant son coin supérieur gauche au point central de l'élément parent. L'attribut transform est utilisé pour déplacer l'élément de 50 % vers le haut et vers la gauche pour aligner le point central de l'élément avec le point central de l'élément parent.

3. Centrer l'image

Pour aligner une image horizontalement, utilisez la méthode suivante :

display: block;
margin: auto;

Cela centrera l'image horizontalement. Pour aligner l'image verticalement, vous pouvez utiliser la méthode suivante :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

4. Centrer le tableau

Pour aligner le tableau horizontalement, vous pouvez utiliser la méthode suivante :

margin: 0 auto;

Cela centrera le tableau horizontalement. Pour aligner verticalement un tableau, vous pouvez utiliser la méthode suivante :

display: flex;
align-items: center;
justify-content: center;

Cela utilisera Flexbox pour centrer le tableau verticalement et horizontalement.

5. Centrer les éléments enfants

Pour centrer les éléments enfants, vous pouvez utiliser la méthode suivante :

display: flex;
align-items: center;
justify-content: center;

Cela utilisera Flexbox pour centrer tous les éléments enfants verticalement et horizontalement.

Dans cet article, nous avons présenté certaines méthodes d'alignement central, notamment le texte, les images, les éléments au niveau des blocs, les tableaux, etc. Lors du choix de la période à utiliser, vous devez choisir la méthode la plus adaptée en fonction des différentes situations.

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!