Comment centrer le texte CSS

Lors de la conception d'une page, la mise en page du texte est particulièrement importante. Quant à la méthode de centrage du texte en CSS, elle peut être réalisée des trois manières suivantes.

1. L'attribut text-align text-align属性

text-align属性可以用来控制文本的水平对齐方式，包括左对齐、右对齐、居中以及两端对齐等。

div{
  text-align: center;
}

其中center表示居中，使用该属性并将值设为center后，文本便会自动居中对齐。

二、line-height属性

line-height属性表示行高，它可以用来设置行内元素的垂直居中。当设置行高等于盒子高度时，文本就会垂直居中。

div{
  height: 200px;
  line-height: 200px;
  text-align: center;
}

这样就可以实现文本居中对齐了。

三、display和text-align属性

可以通过display属性将文本元素转换为弹性盒子布局，再通过justify-content属性来控制水平居中。其中justify-content属性可以设置不同的值，包括center、flex-start、flex-end

text-align peut être utilisé pour contrôler l'alignement horizontal du texte .Y compris l'alignement à gauche, l'alignement à droite, le centre et l'alignement, etc.

div{
  display: flex;
  justify-content: center;
}

Où center signifie centré. Après avoir utilisé cet attribut et défini la valeur sur center, le texte sera automatiquement aligné au centre. #🎜🎜##🎜🎜# 2. L'attribut line-height #🎜🎜##🎜🎜#line-height représente la hauteur de la ligne, qui peut être utilisée pour définir le centrage vertical en ligne de l'élément. Lorsque vous définissez une hauteur de ligne égale à la hauteur de la boîte, le texte est centré verticalement. #🎜🎜#rrreee#🎜🎜#De cette façon, vous pouvez centrer le texte. #🎜🎜##🎜🎜#3. Attributs display et text-align #🎜🎜##🎜🎜# Vous pouvez utiliser le display attribut à L'élément de texte est converti en une disposition de boîte flexible et le centrage horizontal est contrôlé via l'attribut justify-content. L'attribut justify-content peut être défini sur différentes valeurs, notamment center, flex-start, flex-end , Signifie respectivement centré, aligné à gauche, aligné à droite, etc. #🎜🎜#rrreee#🎜🎜#Ci-dessus sont trois méthodes pour centrer horizontalement le texte chinois en CSS, qui peuvent être utilisées de manière flexible pour rendre la page plus belle. Si vous devez centrer le texte verticalement et horizontalement, vous pouvez utiliser une combinaison des deux méthodes ci-dessus. Dans le même temps, il convient également de noter que les méthodes de centrage utilisées par différents styles d'éléments peuvent être différentes et que la méthode appropriée doit être sélectionnée en fonction de la situation spécifique. #🎜🎜#

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!