Maison >interface Web >tutoriel CSS >Comment centrer verticalement du texte dans une division de hauteur inconnue ?
Comment centrer verticalement du texte dans une division de hauteur inconnue ?
- Patricia Arquetteoriginal
- 2024-11-11 09:52:02764parcourir
Alignement vertical dynamique du texte dans les divs
Réaliser le centrage vertical du texte dans un div de hauteur inconnue peut être un défi. Examinons une solution qui garantit un alignement cohérent quelles que soient les dimensions du div.
La solution exploite la propriété display pour définir l'élément wrapper sous forme de table. Cela nous permet d'utiliser la propriété d'alignement vertical dans l'élément que nous voulons centrer.
Exemple de code :
<body>
<div>
<h1>Text</h1>
</div>
</body>
body {width: 100%; height: 100%;} /* This is just to "view" the div height... */
div {
position:absolute; height:100%; width:100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align:center;
}
Comment ça Fonctionne :
- Les propriétés position : absolue et hauteur : 100 % garantissent que le div couvre toute la hauteur de la page Web.
- En définissant display: table sur le div , nous autorisons la propriété table-cell sur la balise h1 à aligner verticalement son contenu.
- La propriété vertical-align: middle centre la balise h1 verticalement dans le div. Cela garantit que le texte reste centré même lorsque la div change de taille.
Cette solution a été testée sur divers navigateurs et systèmes d'exploitation, notamment Internet Explorer, Firefox, Chrome, Opera et Safari. Il fournit un moyen simple et efficace de centrer verticalement le texte dans un div de hauteur dynamique.
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!