web-dev-qa-db-fra.com

CSS: aligner verticalement div lorsque aucune taille fixe de la div n'est connue

Comment aligner un <div> qui contient une image (ou un flash) verticalement avec CSS. La hauteur et la largeur sont dynamiques.

htmlcssvertical-alignment
45
Oleg Tarasenko

C’est une solution CSS2 pure pour le centrage horizontal et vertical sans taille connue ni de conteneur ni d’enfant. Aucun piratage n'est impliqué. Je l'ai découvert pour cette réponse et je l'ai également démontré dans cette réponse .

La solution est basée sur vertical-align: middle en conjonction avec line-height: 0, dont le parent a une hauteur de ligne fixe.

Le HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

Et le CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

Testé sur Win7 dans IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

La seule mise en garde est IE7, pour laquelle les deux éléments les plus internes doivent être déclarés sur une seule ligne, comme indiqué dans dans ce violon :

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Notez que les span sont également requis pour IE7. Dans tous les autres navigateurs, l'intervalle peut être div.

45
NGLN

Vous pouvez le faire en utilisant des blocs en ligne, un avec height: 100% (et les mêmes hauteurs pour HTML et BODY) et vertical-align: middle.

Exemple 1: http://jsfiddle.net/kizu/TQX9b/ (beaucoup de contenu, donc toute la largeur)

Exemple 2: http://jsfiddle.net/kizu/TQX9b/2/ (une image de toute taille)

Dans cet exemple, j'utilise spans, donc cela fonctionnerait dans IE sans hacks, si vous souhaitez utiliser divs, n'oubliez pas d'ajouter des commentaires conditionnels pour IE .helper, .content { display: inline; zoom: 1; } fonctionnerait pour les éléments de bloc.

12
kizu

En plus des autres réponses ici, le modèle de boîte à outils CSS3 vous permettra, entre autres, d’y parvenir.

Vous n'avez besoin que d'un seul élément conteneur. Tout ce qui se trouve à l'intérieur sera aménagé selon les règles du modèle de boîte flexible.

<div class="container">
    <img src="/logo.png"/>
</div>

Le CSS est assez simple, en fait:

.container { 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

J'ai omis les règles préfixées par le vendeur pour des raisons de brièveté.

Voici une démo dans laquelle l'image est toujours au centre de la page: http://jsfiddle.net/zn8bm/

Notez que Flexbox est une spécification récente et n’est actuellement implémentée que dans Safari, Chrome et Firefox 4+.

8
Chris

Je recommanderais cette solution de Bruno: http://www.brunildo.org/test/img_center.html

Cependant, j'ai rencontré un problème avec sa solution w/r/t webkit. Il semble que Webkit créait un petit espace en haut de la div si la span vide était autorisée. Donc, pour ma solution, j'ajoute la plage vide uniquement si je détecte que le navigateur est IE (si quelqu'un découvre comment se débarrasser de l'espace, faites le moi savoir!)

HTML:

<div class="outerdiv">
    <img src="..." /> 
</div>

CSS:

.outerdiv {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}
.ie_vertical_align * {
    vertical-align: middle;
}
.ie_vertical_align span {
    display: inline-block;
    height: 150px;
    width: 0;
}

Et si je détecte que le navigateur est IE, j'ajoute un élément span vide avant la balise img et un style css afin qu'il ressemble à ceci:

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

Voici un JSFiddle avec ce code.

4
rcl

Dušan Janovský, développeur Web tchèque, a publié une solution multi-navigateurs pour cela il y a quelque temps. Lire http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

2
duri

Si vous ne vous souciez pas d'IE7 et des versions antérieures, vous n'avez pas à utiliser plusieurs divs imbriquées. Si vous souhaitez aligner verticalement une div, celle-ci se trouve dans un conteneur (même si le conteneur est votre <body>). Par conséquent, vous pouvez spécifier display: table-cell et vertical-align: middle sur le conteneur, votre div sera ensuite centrée verticalement.

Cependant, si vous vous souciez de IE7 et des versions antérieures, vous aurez besoin d'un conteneur supplémentaire pour le faire fonctionner (oui, via un hack).

Jetez un oeil à ce violon . Il s'affiche correctement dans IE6-9 et d'autres principaux navigateurs. #container2 est présent uniquement pour IE7 et ses versions antérieures. Par conséquent, si vous ne vous en souciez pas, vous pouvez le supprimer, ainsi que les styles conditionnels spécifiques à IE.

1
Artyom

essayez l'astuce de remplissage de 50%: 

<html>

<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line; 
     text-align:center; vertical-align:bottom; 
     padding: 50% 0 50% 0">test</div>
</body>

</html>
0
RetroCoder

Définir l'image comme arrière-plan de la div et l'aligner au centre

0
Benjamin Udink ten Cate