Voici le texte centré``` 2. Centrage du texte des éléments de bloc Pour le texte multiligne ou les éléments de bloc, nous pouvons utiliser mar"/> Voici le texte centré``` 2. Centrage du texte des éléments de bloc Pour le texte multiligne ou les éléments de bloc, nous pouvons utiliser mar">

Maison >interface Web >Questions et réponses frontales >Plusieurs méthodes de centrage CSS

Plusieurs méthodes de centrage CSS

王林
王林original
2023-05-29 12:11:387667parcourir

Dans la conception Web, le centrage est très important tant pour l'esthétique que pour la lisibilité. En CSS, il existe de nombreuses façons de réaliser le centrage. Voici quelques méthodes couramment utilisées.

1. Centrage du texte

1. Centrez le texte des éléments en ligne

Pour le texte sur une seule ligne, nous pouvons utiliser l'attribut text-align pour terminer le centrage.

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

2. Centrage du texte des éléments de bloc

Pour le texte multiligne ou les éléments de bloc, nous pouvons utiliser l'attribut margin pour définir les marges gauche et droite sur automatique et définir la largeur sur non 100 % pour terminer le centrage.

<div style="margin: 0 auto; width: 80%;">这里是居中的多行文本</div>

2. Centrage des éléments

1. Centrage horizontal

Utilisez l'attribut margin et définissez les marges gauche et droite sur automatique pour terminer le centrage horizontal.

<div style="margin: 0 auto;"></div>

2. Centrage vertical

La méthode de centrage vertical est plus compliquée et il existe de nombreuses façons de la mettre en œuvre.

(1) Utilisez Flexbox

pour définir display:flex et align-items:center sur l'élément parent pour obtenir un centrage vertical.

<div style="display: flex; align-items: center; height: 200px;">
  <div>这里是垂直居中的元素</div>
</div>

(2) Utilisez table-cell

pour définir display:table et vertical-align:middle sur l'élément parent, et définissez display:table-cell sur l'élément enfant pour obtenir un centrage vertical.

<div style="display: table; height: 200px; width: 100%;">
  <div style="display: table-cell; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

(3) Utilisez Absolute

pour définir la position:absolute;top:50%;left:50% et transform:translate(-50%,-50%) sur l'élément enfant pour obtenir un centrage vertical.

<div style="position: relative; height: 200px;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">这里是垂直居中的元素</div>
</div>

(4) Utilisez line-height

Définissez la hauteur et la hauteur de la ligne égales sur l'élément parent, et définissez vertical-align:middle sur l'élément enfant pour obtenir un centrage vertical.

<div style="height: 200px; line-height: 200px;">
  <div style="display: inline-block; vertical-align: middle;">这里是垂直居中的元素</div>
</div>

Grâce aux méthodes ci-dessus, nous pouvons facilement obtenir l'effet de centrage des éléments dans les pages Web. Il est nécessaire de choisir la méthode appropriée en fonction de la situation spécifique pour obtenir de meilleurs effets visuels sur la page.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn