Comment définir la police pour qu'elle soit centrée en CSS

Définir le centrage des polices en CSS est très important pour la typographie Web, en particulier lors de la transition du design réactif au design des appareils mobiles. Dans les pages Web, nous devons souvent centrer les polices des titres, paragraphes, menus de navigation et autres éléments pour améliorer la lisibilité et l’esthétique de la page. Ensuite, cet article présentera brièvement comment utiliser CSS pour centrer les polices.

1. Centrage horizontal

En CSS, il existe plusieurs façons de réaliser le centrage horizontal du texte. Ces méthodes sont présentées ci-dessous :

1. text-align: center

L'attribut text-align contrôle l'alignement du texte, y compris l'alignement à gauche (à gauche), l'alignement à droite (à droite), l'alignement au centre (au centre) et l'alignement dispersé. . (justifier) ​​et justification (texte-justifier), etc. Pour centrer le texte horizontalement, définissez simplement la propriété text-align de l'élément où réside le texte au centre.

Par exemple :

Ceci est un titre

peut être réécrit comme :

h1 {
text-align: center;
}

2. margin: auto

l'attribut marge est utilisé pour contrôler les marges de l'élément, y compris la marge supérieure, la marge inférieure, la marge gauche et la marge droite. Si vous définissez les marges gauche et droite d'un élément sur auto, l'élément sera centré horizontalement.

Par exemple :

h1 {
margin: auto;
}

2 Centrage vertical

Sans préciser de hauteur, le centrage vertical d'un élément est difficile à réaliser. Mais dans certains cas spécifiques, nous pouvons toujours réaliser un centrage vertical des éléments. Voici plusieurs méthodes :

1. line-height

line-height définit la hauteur de la ligne, c'est-à-dire la distance entre les lignes. Si vous définissez la hauteur de la ligne égale à la hauteur de l'élément, le texte sera centré verticalement.

Par exemple :

h1 {
height: 100px;
line-height: 100px;
}

2. flexbox

Flexbox est un nouveau mode de mise en page en CSS3, largement utilisé dans le design réactif et la conception d'appareils mobiles. . La disposition Flexbox utilise des conteneurs flexibles et des éléments flexibles pour obtenir une disposition adaptative et libre des éléments.

Pour réaliser le centrage vertical d'un élément, il vous suffit de définir le conteneur où se trouve l'élément pour qu'il fléchisse, et de définir ses propriétés justification-contenu et align-items sur centre.

Par exemple :

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

Il existe plusieurs façons de définir le centrage des polices en CSS. mise en page et une méthode appropriée doit être choisie. Bien que l'article ne présente que brièvement ces méthodes, ces compétences et connaissances sont toujours essentielles pour la mise en page Web. J'espère qu'elles seront utiles à tout le monde !

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!