Maison >interface Web >tutoriel HTML >Comment centrer le texte (horizontalement et verticalement) dans un bloc div ?
Comment centrer le texte (horizontalement et verticalement) dans un bloc div ?
- 王林avant
- 2023-09-09 11:29:07912parcourir
Nous pouvons facilement centrer le texte horizontalement et verticalement à l'intérieur d'un div. Jetons un coup d'oeil un par un.
Utilisez la propriété text-align pour centrer horizontalement le texte dans un Div
Pour centrer le texte dans un div horizontalement, utilisez la propriété text-align. L'attribut text-align détermine l'alignement des zones de ligne dans les éléments de niveau bloc. Voici les valeurs possibles -
left - Le bord gauche de chaque zone de ligne est aligné avec le bord gauche de la zone de contenu de l'élément de niveau bloc.
right - Le bord droit de chaque zone de ligne est aligné avec le bord droit de la zone de contenu de l'élément au niveau du bloc.
center - Le centre de chaque zone de ligne est aligné avec le centre de la zone de contenu de l'élément au niveau du bloc.
justify - Le bord de chaque zone de ligne doit être aligné avec le bord de la zone de contenu de l'élément au niveau du bloc.
String - Le contenu des cellules de la colonne sera aligné sur la chaîne donnée.
Exemple
Centreons maintenant le texte dans le div horizontalement en utilisant la propriété text-align -
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Utilisez la propriété justifier-content pour centrer le texte horizontalement dans un Div
Exemple
Pour centrer le texte dans un div horizontalement, utilisez la propriété justifier-content. Voyons maintenant un exemple
<!DOCTYPE html>
<html>
<head>
<title>Align Horizontally</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered horizontally.</p>
</div>
</body>
</html>
Utilisez la propriété padding pour centrer verticalement le texte dans Div
Pour centrer verticalement le texte dans un div, utilisez la propriété padding. La propriété padding vous permet de spécifier la quantité d'espace qui doit apparaître entre le contenu d'un élément et sa bordure. Les propriétés CSS suivantes peuvent être utilisées pour contrôler les listes. Vous pouvez également définir différentes valeurs pour le remplissage de chaque côté de la boîte en utilisant les propriétés suivantes -
- padding-bottom Spécifie le remplissage inférieur de l'élément.
- padding-top Spécifie le remplissage supérieur de l'élément.
- padding-left Spécifie le remplissage gauche de l'élément.
- padding-right Spécifie le remplissage correct de l'élément.
- padding est utilisé comme raccourci pour les propriétés susmentionnées.
Exemple
Voyons maintenant un exemple de centrage vertical du texte dans un div à l'aide de la propriété padding -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
padding: 50px 0;
}
</style>
</head>
<body>
<h1>Software Quality Management</h1>
<p>Software Quality Management ensures the required level of software quality is achieved.
</p>
<div class="demo">
<p>This text in div is centered vertically.</p>
</div>
</body>
</html>
Utilisez la propriété line-height pour centrer verticalement le texte dans un Div
Pour centrer verticalement le texte dans un div, utilisez la propriété line-height. La propriété line-height modifie la hauteur des zones en ligne qui composent une ligne de texte.
Voici les valeurs possibles -
Normal - Demande au navigateur de définir la hauteur de la ligne dans l'élément à une distance "raisonnable".
number - La hauteur réelle de la ligne dans l'élément est cette valeur multipliée par la taille de la police de l'élément.
length - La hauteur de la ligne dans l'élément est la valeur donnée.
Pourcentage - La hauteur des lignes d'un élément est calculée en pourcentage de la taille de la police de l'élément.
Exemple
Voyons maintenant un exemple de centrage vertical du texte dans un div à l'aide de la propriété line-height -
<!DOCTYPE html>
<html>
<head>
<title>Align Vertically</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
.demo {
background-color: orange;
border: 3px solid yellow;
line-height: 150px;
height: 200px;
}
</style>
</head>
<body>
<h1>Software Quality Management</h1>
<p>Software Quality Management is a process that ensures the required level of software
quality is achieved.</p>
<div class="demo">
<p> This text in div is centered vertically.</p>
</div>
</body>
</html>
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!