Je veux centrer une div verticalement avec les CSS. Je ne veux pas de tables ou de Javascript, mais seulement pur CSS. J'ai trouvé quelques solutions, mais ils manquent d'Internet Explorer 6 prise en charge.
<body>
<div>Div to be aligned vertically</div>
</body>
Comment centrer une div verticalement dans tous les principaux navigateurs, y compris Internet Explorer 6?
Ci-dessous est la meilleure solution que j'ai pu construire à la verticale et à l'horizontale centre d'une largeur fixe, flexible hauteur de la boîte de contenu. Testé et de travail pour les dernières versions de FF, Opera, Chrome, Et Safari, et MSIE 6+.
HTML
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
CSS
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: /*whatever width you want*/;
}
Pour accueillir pour IE 7 et plus, utiliser une feuille de style séparée avec ces modifications:
<!--[if lte IE 7]><link rel="stylesheet... /><![endif]-->;
.outer {
display: inline;
top: 0;
}
.middle {
display: inline;
top: 50%;
position: relative;
}
.inner {
display: inline;
top: -50%;
position: relative;
}
Page de Test: http://emergentweb.com/test/valign.html
J'ai construit dans une certaine dynamique de contenu pour tester la flexibilité. Aimerais savoir si quelqu'un voit pas de problèmes avec elle. Devrait bien fonctionner pour l'centrée sur les superpositions d' -- lightbox, pop-up, etc.
Un de plus je ne vois pas dans la liste:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Height doit être déclarée (voir la Variable Hauteur) auto pour empêcher le contenu de contagion (voir Débordement)
C'est la méthode la plus simple que j'ai trouvé et je l'utilise tout le temps (jsFiddle démo ici)
Merci à Chris Coyier de CSS Astuces pour cet article.
HTML
<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>
CSS
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
Le soutien commence avec IE8.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
