Comment puis-je centrer le texte verticalement dans un div de hauteur dynamique?
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
Comment puis-je centrer verticalement la balise h1 à l'intérieur de la balise div, quelle que soit la taille de l'élément div? c'est-à-dire que si l'utilisateur change la hauteur de son navigateur, je veux que le h1 soit aligné verticalement au centre, en fonction de la nouvelle hauteur.
Merci.
9 réponses
la meilleure solution que j'ai jamais rencontrée est de faire usage de la propriété display et de définir l'élément enveloppant comme un table pour permettre l'utilisation de vertical-align:middle sur l'élément à centrer:
voir ce exemple de violon de travail !
HTML
<body>
<div>
<h1>Text</h1>
</div>
</body>
CSS
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;
}
TESTÉ SUR
Windows XP profissional versão 2002 Service Pack 3
- Internet Explorer 8.0.6001.18702
- Opéra 11.62
- Firefox 3.6.16
- Safari 5.1.2
- Google Chrome 18.0.1025.168 m
Windows 7 Home Edition Service Paquet 1
- Internet Explorer 9.0.8112.164211 C
- Opéra 11.62
- Firefox 12.0
- Safari 5.1.4
- Google Chrome 18.0.1025.168 m
Linux Ubuntu 12.04
- Firefox 12.0
- Chrome 18.0.1025.151 (Développeur Construire 130497 Linux)
la réponse je trouve que la moins gênante et la moins déroutante exige l'insertion d'une étiquette <span> devant l'élément <h1> : http://jsfiddle.net/Wexcode/axRxE /
HTML:
<div>
<span></span><h1>Text</h1>
</div>
CSS:
div { text-align: center; /* horizontally center */ }
div span {
height: 100%;
vertical-align: middle;
display: inline-block; }
div h1 {
vertical-align: middle;
display: inline-block; }
étendre cette technique à la verticale-s'aligner sur le navigateur-hauteur: http://jsfiddle.net/Wexcode/axRxE/1 /
j'ai les 3 lignes les plus faciles de css qui vont vous épater et vous vous demanderez"pourquoi n'y ai-je pas pensé au départ". Utilisez ceci sur l'élément que vous souhaitez être positionné verticalement centré et le conteneur parent juste ajouter une hauteur de 100%.
position: relative;
top: 50%;
transform: translateY(-50%);
La position peut être relative, absolue ou fixe.
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #0c0c0c;
}
.object {
background-color: #666666;
height: 350px;
width: 600px;
}
.verticalCenter {
width:600px;
height:350px;
position:absolute;
left:50%;
top:50%;
margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
<div class="verticalCenter">
<div class="object">cetnered</div>
</div>
</body>
</html>
vous devez régler la hauteur et la largeur .la classe verticalCenter est la même que pour votre objet (div, flash, image, texte) qui doit être centré. Et les marges doivent être la moitié de cette hauteur et largeur.
Je ne pense pas qu'il y ait de solution si vous changez cet objet dynamiquement. À moins que, peut-être avec javascripts.
Voici une solution assez simple. Il est principalement basé sur le réglage display:table-cell et le choix d'un alignement vertical comme le milieu.
HTML:
<div id="vertical">
<p>this text is vertically centered. It's long enough to wrap, and should work for any size chunk of content.</p>
<p>Heck, it even works with multiple items in the middle.</p>
</div>
CSS:
#vertical {
display:table-cell;
vertical-align:middle;
height: 500px;
width: 300px;
}
JSFiddle: http://jsfiddle.net/6Re3E/1 /
il y a une cross (desktop) browser solution pour faire cela avec CSS2 + CSS3 et sans aucun Javascript.
Œuvres
- IE5+
- Gecko's (Mozilla, Firefox, Netscape 7)
- Opera 7+
- Konqueror 3+
- Navigateurs Webkit (Safari, Google Chrome)
- et beaucoup plus (navigateurs mobiles non testé)
Documentation: centrage Vertical dans CSS solution définitive avec hauteur inconnue:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
exemple de jsFiddle propre : http://jsfiddle.net/WYgsP /
HTML
<div class="outerBox">
<div class="helper">
<div class="boxWithUnknownHeight">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
CSS
.outerBox {
display: table;
height: 400px;
#position: relative; /* ie hack */
overflow: hidden;
border: 1px solid red;
}
.helper {
#position: absolute; /* ie hack */
#top: 50%; /* ie hack */
display: table-cell;
vertical-align: middle;
}
.boxWithUnknownHeight {
#position: relative; /* ie hack */
#top: -50%;
border: 1px solid green
}
ça marche, même si j'ajoute du texte et des brèches de ligne dans Firebug etc.
pour garder votre CSS propre de CSS-Hacks invalides, je vais vous recommander d'utiliser commentaires conditionnels pour elle et de créer un CSS séparé avec le code spécifique du navigateur.
comment centrage vertical avec hauteur inconnue fonctionne exactement et pourquoi: description détaillée
autres solutions avec display: table et ou display: table-cell et ou positionnement absolu ici .
j'utilise des tables pour tout. Personnellement, je n'aime pas utiliser display: table ou quelque chose comme ça quand il y a quelque chose qui existe déjà.
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
en utilisant cette même méthode, vous pouvez faire quelque chose comme ça pour votre cas:
<div id="container-div" style="position: relative">
<div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
<div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
</div>
</div>
de mon point de vue, div n'est pas un choix approprié en l'espèce. Ma suggestion est d'aller pour table et vertical-align style sur elle td s.