Maison >interface Web >tutoriel CSS >Comment centrer verticalement du texte dans une division redimensionnable ?

Comment centrer verticalement du texte dans une division redimensionnable ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-09 07:50:02327parcourir

How to Vertically Center Text in a Resizable Div?

Comment centrer verticalement le texte dans un div redimensionnable

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 :

  • Internet Explorer 8
  • Opéra 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18

Windows 7 :

  • Internet Explorer 9
  • Opera 11.62
  • Firefox 12
  • Safari 5.1.4
  • Google Chrome 18

Linux Ubuntu 12.04 :

  • Firefox 12
  • Chromium 18

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!

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