CSS fournit divers styles d'alignement, tels que gauche, droite, centre, justifié, horizontal et vertical, pour différents types de contenu. Plus précisément, pour le cap et les lignes courtes, le «centre”Le style d'alignement est utilisé. En utilisant ce style, l'apparence du contenu peut être améliorée, et elle aura l'air soignée.

Cet article expliquera diverses méthodes pour centrer le texte verticalement. Alors, commençons!

Comment centrer le texte verticalement dans CSS?

Il existe de nombreuses façons de centrer du texte verticalement, comme «flexion","hauteur de la ligne","rembourrage","transformer", et le "flotter" propriété. Dans cette section, nous découvrirons certaines des propriétés mentionnées pour centrer le texte verticalement dans CSS. Mais avant cela, nous montrerons la procédure de texte d'alignement central.

Exemple

Dans le HTML, nous créerons un conteneur avec une classe nommée «centre»Et à l'intérieur, créez une rubrique en utilisant

étiqueter:

"Agir sans rien attendre en retour"

Après cela, passez au fichier CSS et style que vous avez créé dans le fichier html.

Ici ".centre«Est utilisé pour accéder à la classe que nous avons affectée au . Ensuite, nous définirons la largeur du conteneur créé à «450px"Et la hauteur de"200px". Nous avons également établi la frontière de l'utilisation du «frontière«Propriété et attribuez la valeur de la frontière»10px" et "double»:

.centre
Largeur: 450px;
hauteur: 200px;
Border: 7px double;

Après l'implémentation du code ci-dessus, nous obtenons le résultat suivant:

Ici, nous voyons que le texte est affiché dans le coin supérieur gauche de l'écran. Maintenant, nous passons à l'étape suivante, dans laquelle nous décrirons différentes méthodes pour centrer le texte verticalement à l'aide de CSS.

Méthode 1: Texte central verticalement dans CSS en utilisant Flex

CSS "fléchir"Est la valeur du"afficher" propriété. Il est utilisé pour définir du contenu ou des éléments en fonction de leur taille de la fenêtre. Il permet aux éléments CSS d'organiser efficacement en créant un espace égal entre eux.

Syntaxe

Affichage: flexion

Alors, continuons l'exemple précédent pour centraliser le texte verticalement.

Exemple

Pour définir la position du texte au centre et vertical, nous attribuerons la valeur de la propriété d'affichage comme «fléchir»Et alignez des éléments comme«centre»:

.centre
Largeur: 450px;
hauteur: 200px;
Border: 7px double;
Affichage: flex;
Align-Items: Centre;

Cela nous donnera le résultat suivant:

Ici, nous pouvons voir que notre texte est aligné verticalement et aussi au centre de la div. Maintenant, nous passerons à la deuxième méthode.

Méthode 2: Texte central verticalement dans CSS à l'aide de la propriété de hauteur de ligne

Le "hauteur de la ligne»La propriété spécifie la hauteur entre deux lignes dans les éléments. Il est utilisé pour créer de l'espace entre deux lignes ayant du texte.

Syntaxe

La syntaxe de la propriété de hauteur de ligne est donnée comme suit:

hauteur de ligne: valeur

Dans la syntaxe donnée ci-dessus, nous spécifierons la hauteur de la ligne comme «valeur".

Note: Dans la propriété line-hauteur, nous ne pouvons pas donner une valeur négative.

Exemple

Maintenant, nous utiliserons la propriété Line-Height pour définir du texte dans le centre vertical du . Pour ce faire, dans le fichier CSS, définissez la valeur de la propriété line-hauteur sur «150px»:

.centre
Largeur: 450px;
hauteur: 200px;
Border: 7px double;
HEURS DE LIGNE: 150px;

Cela nous donnera le résultat suivant:

MÉTHODE 3: CENTRE Texte verticalement dans CSS en utilisant un rembourrage

Pour créer de l'espace entre la bordure d'un élément et son contenu, le «rembourrage»La propriété est utilisée. Il s'agit d'une propriété raccourci de CSS qui peut être utilisée pour régler le rembourrage de tous les côtés en une seule ligne.

Syntaxe

La syntaxe de la propriété de rembourrage est:

rembourrage: en haut à droite en bas à gauche

Voici la description des valeurs ci-dessus de la propriété mentionnée:

• haut: Il est utilisé pour créer de l'espace à partir du haut.
• droite: Il est utilisé pour créer de l'espace à partir de la droite.
• bouton: Il est utilisé pour créer de l'espace en bas.
• gauche: Il est utilisé pour créer de l'espace à partir de la gauche.

Note: La spécification de deux valeurs signifiera le rembourrage en haut et en bas et en rembourrage à partir de gauche et de droite; Cependant, si une valeur est ajoutée, un rembourrage sera appliqué aux quatre côtés.

Exemple

Ici, nous allons définir la valeur du rembourrage comme «dix%" et "0%», Où la première valeur indique un rembourrage supérieur et inférieur et le second indique le rembourrage de gauche et de droite. De plus, nous voulons seulement centraliser le texte verticalement, nous allons donc définir la deuxième valeur sur «0»:

.centre
Border: 7px double;
rembourrage: 10% 0;

Après l'implémentation du code donné, accédez au fichier HTML, exécutez-le et vérifiez la sortie suivante:

Nous avons fourni des méthodes différentes liées à l'alignement du centre verticalement dans CSS.

Conclusion

Pour centrer le texte verticalement, utilisez le «flexion","hauteur de la ligne" et "rembourrage»Propriétés de CSS. Ces propriétés vous permettent de définir la hauteur dans le contenu et la bordure de l'élément. Dans cet article, nous expliquons comment centrer le texte verticalement en utilisant trois méthodes différentes et fournissez un exemple de chaque méthode.