Lorsque vous travaillez avec des éléments div de taille dynamique, il peut être difficile de maintenir l'alignement vertical du texte dans le div. Ce problème survient lorsque la hauteur du div n'est pas fixe, car elle peut varier en fonction de facteurs tels que la hauteur du navigateur de l'utilisateur.
Solution :
Pour résoudre ce problème , une solution polyvalente consiste à utiliser la propriété display pour transformer l'élément div en une structure tabulaire. En définissant la propriété display sur table, nous créons un environnement de type table au sein du div. Cela nous permet d'utiliser la propriété vertical-align sur l'élément de texte pour le centrer verticalement dans le div.
Marquage HTML :
<body>
<div>
<h1>Text</h1>
</div>
</body>CSS Style :
body {
width: 100%;
height: 100%;
}
div {
position: absolute;
height: 100%;
width: 100%;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
}Navigateurs notables Testé :
Grâce à cette technique, nous avons testé avec succès le centrage vertical du texte dans les éléments div dans divers navigateurs, notamment :
Windows XP :
Windows 7 :
Linux Ubuntu 12.04 :
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
