Comment centrer la police en CSS

CSS (Cascading Style Sheets) est un langage utilisé pour la conception Web, qui peut contrôler le style et la disposition de divers éléments sur la page. Dans la conception Web, la police est un élément très important car elle affecte directement la lisibilité et le style général de la page. Cependant, nous constatons parfois que dans la conception Web, le problème des polices non centrées est très courant. Alors, comment centrer la police ? Cet article vous présentera plusieurs méthodes courantes.

1. Utilisez l'attribut line-height

L'attribut line-height peut définir l'espacement des lignes du texte dans l'élément Avec des paramètres raisonnables, la police peut être centrée verticalement. De manière générale, nous pouvons définir la valeur de line-height pour qu'elle soit égale ou légèrement supérieure à la taille de la police, ce qui garantit que la police est centrée verticalement. Par exemple, si nous voulons centrer le texte dans un paragraphe verticalement, nous pouvons utiliser le code CSS suivant :

p {
font-size : 18px;
line-height : 18px;
}

2. utilisez le texte- Attribut align

L'attribut text-align peut contrôler l'alignement horizontal du texte dans un élément avec des paramètres raisonnables, la police peut être centrée horizontalement. Si nous voulons centrer une seule ligne de texte horizontalement, nous pouvons utiliser le code CSS suivant :

h1 {
font-size: 24px;
text-align: center;
}

Cela centrera le texte dans le titre horizontalement.

3. Utilisez l'attribut display et l'attribut text-align

L'attribut display peut contrôler le mode d'affichage de l'élément en définissant l'élément sous la forme d'une cellule de tableau (table-cell), le texte dans l'élément peut. être centré verticalement. Nous pouvons combiner l'attribut text-align pour définir l'alignement horizontal et vertical. Voici un exemple :

div {
display: table-cell;
vertical-align: middle;
text-align: center;
}

4. Utilisation de la disposition flexbox

La disposition Flexbox est une sorte d'élasticité en CSS3 Disposition des boîtes, qui permet de contrôler de manière flexible la disposition des éléments, y compris le centrage horizontal et vertical. Voici un exemple :

.container {
display: flex;
justifier-content: center;
align-items: center;
}

Dans le code ci-dessus, nous définissons l'élément conteneur (conteneur) sur flex layout , Et définissez les attributs justification-content et align-items pour obtenir respectivement un centrage horizontal et vertical.

Résumé

Dans la conception Web, le centrage de la police est une question très importante, liée à l'effet global et à la lisibilité de la page. Dans cet article, nous présentons quatre méthodes courantes pour réaliser le centrage des polices, notamment l'utilisation de l'attribut line-height, de l'attribut text-align, de l'attribut display et de la disposition flexbox. Différentes méthodes peuvent être choisies dans différents scénarios pour obtenir les meilleurs résultats.

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!