Comment centrer verticalement du texte dans une division de hauteur inconnue ?-tutoriel CSS-php.cn

Comment centrer verticalement du texte dans une division de hauteur inconnue ?

Patricia Arquette

Libérer： 2024-11-11 09:52:02

original

729 Les gens l'ont consulté

How to Vertically Center Text in a Div of Unknown Height?

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>

Copier après la connexion

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;
}

Copier après la connexion

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!