recherche

Maison >interface Web >tutoriel CSS >Comment centrer verticalement le texte dans des divisions de hauteur dynamique ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-11-07 12:13:03627parcourir

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>

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

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

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

Systèmes testés :

  • Windows XP Professionnel, Service Pack 3
  • Windows 7 Édition Familiale, Service Pack 1
  • Linux Ubuntu 12.04

Testé Navigateurs :

  • Internet Explorer 8.0.6001.18702, 9.0.8112.164211C
  • Opera 11.62
  • Firefox 3.6.16, 12.0
  • Safari 5.1.2, 5.1.4
  • Google Chrome 18.0.1025.168 m
  • Chromium 18.0.1025.151 (Build du développeur 130497 Linux)

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!

chrome html Property this display table windows linux ubuntu
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment personnaliser les images de curseur en CSS sur différents navigateurs ?Article suivant：Comment personnaliser les images de curseur en CSS sur différents navigateurs ?

Articles Liés

Voir plus