communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > le corps du texte

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

Barbara Streisand
Libérer： 2024-11-07 12:13:03
original
494 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 :

  • 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!

source：php.cn
Article précédent：Comment personnaliser les images de curseur en CSS sur différents navigateurs ? Article suivant：Comment éliminer les lacunes dans les lignes d’amorçage empilées ?
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
2
1914
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
10
2088
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1756
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1656
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1667
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal