Maison > Article > interface Web > Comment aligner verticalement le texte en CSS

Comment aligner verticalement le texte en CSS

藏色散人original: 2020-12-18 10:17:195357parcourir

Comment aligner verticalement du texte en CSS : 1. Définissez la hauteur réelle de la ligne de texte pour qu'elle soit égale à la hauteur de la hauteur de ligne 2. Créez plusieurs lignes de texte de hauteur inconnue centrées verticalement en définissant ; la même valeur de remplissage en haut et en bas ;3. Utilisez l'alignement vertical pour centrer le texte multiligne à une hauteur fixe.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

1. Alignez une seule ligne de texte verticalement au centre

S'il n'y a qu'une seule ligne de texte. dans un conteneur, centrez-le. C'est relativement simple. Il suffit de définir sa hauteur réelle pour qu'elle soit égale à la hauteur de la rangée.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单行文字实现垂直居中 </title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

Rendu :

Comment aligner verticalement le texte en CSS

Cependant, dans Internet Explorer 6 et versions antérieures, cette méthode ne prend pas en charge les images. Définir le centrage vertical .

2. Centrage vertical d'un texte multiligne de hauteur inconnue

Si la hauteur d'un élément de contenu est variable, alors nous pouvons utiliser la méthode de centrage horizontal mentionnée dans la section précédente. La dernière méthode consiste à définir le remplissage de manière à ce que les valeurs de remplissage supérieure et inférieure soient les mêmes. Encore une fois, cela "ressemble" à un centrage vertical, c'est juste une façon de faire en sorte que le texte remplisse complètement le

. Vous pouvez utiliser un code similaire au suivant :

div {
padding:25px;
}

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
}

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!

html5 css css3 html display padding table

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment sélectionner l'élément parent en CSSArticle suivant：Comment sélectionner l'élément parent en CSS

Articles Liés

Voir plus