Comment centrer la police CSS

Dans la conception Web, le centrage des polices joue un rôle essentiel dans la beauté globale de la page. CSS fournit une variété de méthodes pour obtenir l'effet de centrage des polices. Voici quelques méthodes d'implémentation couramment utilisées.

1. Utilisez l'attribut text-align

text-align est l'un des attributs les plus couramment utilisés en CSS, qui peut centrer le contenu du texte d'un élément horizontalement . Par défaut, la valeur de l'attribut text-align est left, ce qui signifie que le contenu du texte dans l'élément sera aligné à gauche. Si vous devez centrer le contenu du texte, vous devez définir la valeur de l'attribut text-align sur center. Par exemple :

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

Remarque : L'attribut text-align ne fonctionne que sur le contenu du texte et n'a aucun effet sur les autres éléments (tels que les images).

2. Utilisez l'attribut line-height

line-height est un attribut qui définit la hauteur de ligne, qui peut contrôler l'espacement des lignes du texte dans un élément. Nous pouvons définir la valeur de line-height pour qu'elle soit égale à la hauteur du conteneur, afin que le texte puisse être centré verticalement dans le conteneur. Comme indiqué dans le code suivant :

<div style="height:200px;line-height:200px;text-align:center;">这是居中对齐的文本</div>

Remarque : L'utilisation de la hauteur de ligne pour obtenir l'alignement central nécessite que le texte ne comporte qu'une seule ligne et vous devez connaître la hauteur du conteneur pour définir la valeur de hauteur de ligne.

3. Utilisez les attributs d'affichage et d'alignement du texte

Cette méthode nécessite d'abord de convertir les éléments à aligner au centre en éléments de bloc (par défaut, le texte est entièrement un élément en ligne ), puis utilisez text-align:center pour obtenir l'effet d'alignement central. Comme indiqué dans le code suivant :

<style>
.center{
    display:block;
    text-align:center;
}
</style>
<div class="center">这是居中对齐的文本</div>

Remarque : L'utilisation des attributs d'affichage et d'alignement du texte pour obtenir l'alignement central nécessite que l'élément cible soit un élément de bloc.

4. Utilisez l'attribut transform

Cette méthode nécessite d'ajouter l'attribut transform au style de l'élément cible, puis de définir la valeur de l'attribut translationY sur -50 % . Comme indiqué dans le code suivant :

<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">这是居中对齐的文本</div>

Remarque : utilisez l'attribut transform pour obtenir l'alignement central, et l'élément cible doit être défini sur un positionnement absolu (position : absolu).

Résumé :

Voici plusieurs méthodes couramment utilisées en CSS pour centrer les polices. Vous devez choisir une méthode appropriée en fonction de la situation réelle pour obtenir l'effet d'alignement central. Dans le même temps, choisir différentes méthodes pour différents éléments et situations de texte peut également améliorer l’esthétique de 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!