Comment centrer verticalement le texte dans des divisions de hauteur dynamique ?-tutoriel CSS-php.cn

Comment centrer verticalement le texte dans des divisions de hauteur dynamique ?

Barbara Streisand

Libérer： 2024-11-07 12:13:03

original

442 Les gens l'ont consulté

How to Vertically Center Text in Dynamically Height Divs?

Alignement vertical du texte dans les divisions de hauteur dynamiquement

Lors de l'adaptation des éléments d'un site Web à des hauteurs de navigateur réglables par l'utilisateur, il est souvent essentiel d'assurer l'alignement vertical du texte dans les divs de hauteur dynamique reste centré. Comment y parvenir ?

Considérez la structure HTML suivante :

<body>
    <div>

Copier après la connexion

Pour aligner verticalement le

balise dans la limite

quelle que soit sa hauteur, utilisez la stratégie suivante :

Solution : Exploitez la propriété display pour définir le wrapper

élément sous forme de tableau, permettant à la propriété vertical-align de centrer l'élément contenu.

Exemple de code :

HTML

<body>
    <div>
        Text

Copier après la connexion

CSS

body {width: 100%; height: 100%;}   /* for visual demonstration of 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

Cette approche a été testée sur divers navigateurs et plateformes, notamment :

Systèmes testés :