Les développeurs Web s'appuient sur les titres lorsqu'ils souhaitent mettre en évidence une section de texte importante sur la page Web. Les titres peuvent être utilisés pour atteindre différents objectifs; Cependant, l'objectif principal reste le même, et c'est de souligner le texte important ou de séparer une section d'un autre. Par défaut, les en-têtes sont alignés à gauche; Cependant, pour attirer l'attention du visiteur et le rendre plus visible, vous pouvez mettre la tête au centre.

Ce guide montrera comment centrer H1 dans CSS.

Comment centrer H1 dans CSS?

Pour centrer le H1, nous utiliserons les propriétés CSS suivantes:

• propriété texto-aligne
• affichage des biens
• Position des biens

Commençons par la méthode un!

Méthode 1: Utilisez la propriété Text-Align pour centrer H1 dans CSS

Dans CSS, le «alignement de texte»La propriété est utilisée pour définir le texte des éléments HTML à gauche, au centre ou à droite horizontalement. Généralement, nous pouvons dire que cette propriété est très utile pour l'alignement du texte.

Ici, regardez l'exemple ci-dessous pour comprendre comment fonctionne la propriété Text-Align.

Exemple

Nous avons une audience sur la page Web actuellement alignée sur le côté gauche par défaut. Prenons cette rubrique au centre:

Dans le fichier html, définissez le

Tag dans la section du corps et ajoutez-y du texte.

Html

Ma tête

Dans le fichier CSS, nous utiliserons le «alignement de texte»Propriété et définissez sa valeur sur le«centre". Cela alignera la tête H1 sur le centre.

CSS

H1
Texte-aligne: Centre;

Enregistrez le code et ouvrez-le dans le navigateur:

Comme vous pouvez le voir, nous avons amené avec succès le H1 à l'aide de la propriété CSS Text-Align.

Méthode 2: Utilisez la propriété d'affichage pour centrer H1 dans CSS

Quand il s'agit de définir le comportement de l'élément HTML, le «afficher»La propriété est utilisée. Cette propriété a des valeurs utiles, telles que Flex et Block. De plus, le comportement flexible des éléments est le résultat d'une valeur flexible, et le comportement de bloc des éléments est le résultat d'une valeur de bloc.

Exemple

Premièrement, spécifiez le «afficher«Propriété et sa valeur au«fléchir". Cela rendra l'élément de cap flexible. Dans l'étape suivante, utilisez le «justifier«Propriété avec la valeur»centre”Pour régler la rubrique au centre.

CSS

H1
Affichage: flex;
Justification-contenu: centre;

Sortir

Le titre H1 est aligné avec succès au centre.

Méthode 3: Utilisez la propriété de position pour centrer H1 dans CSS

Ce "position«La propriété est explicite; il décide comment un élément HTML sera placé à une position. La combinaison de cette propriété avec d'autres propriétés CSS entraînera une réalisation de l'objectif souhaité, qui définit la tête H1 dans CSS.

Exemple

Pour centrer le H1, le «position"La propriété peut être utilisée avec la valeur"relatif". Cela réorganisera la position normale de l'élément. Maintenant, utilisez le «gauche«Propriété, et définissez sa valeur sur«40%«Pour créer un espace à partir du côté gauche sera créé, et notre ruban sera aligné sur le centre.

CSS

H1
Position: relative;
Gauche: 40%;

Sortir

Nous avons expliqué les méthodes les plus faciles pour centrer H1 dans CSS.

Conclusion

Pour centrer H1, le CSS "alignement de texte","afficher", ou "position»Les propriétés peuvent être utilisées. Dans l'objectif mentionné, la propriété Text-Align sera utilisée avec le «centre», La propriété d'affichage sera utilisée avec le«fléchir«Valeur, et nous définirons la valeur de la propriété de position«relatif"Pour obtenir le résultat souhaité. Cet article a couvert comment centrer H1 en utilisant différentes propriétés CSS.