[RESOLU] Centrage vertical d'une image

Bonsoir à tous,

mon sujet est vu, et revu, et rerevu... mais malgré le tutoriel sur le site et d'autres trouvés qui disent en substance la même chose, je n'arrive pas à centrer verticalement une image dans une div.

mon html:

<div class="conteneur">
<div class="gauche">
<img src="images/imgfirst.png" alt="image">
</div>
</div>

et en css:

.conteneur { height:25rem; width:100%; overflow:hidden; }
.gauche { height:100%; width:50%; display: table-cell; vertical-align: middle; }
img { width:100%; height:auto; }

le but est simple: mon image fait 100% de large de sa div parente, et doit se centrer verticalement, et si ça dépasse en haut et en bas, on cache!

tout fonctionne, sauf bien sûr le centrage vertical.

Pouvez vous me dire là où je me trompe?
Merci à tous
Modifié par Claire39 (17 Feb 2014 - 14:53)

salut,
en ajoutant "display:table" à ".conteneur" ?

Bonjour,
tu peut aussi essayer avec line-height, vertical-align , overflow et le positionnement relatif/absolu avec un ajout de marge négative..
http://codepen.io/anon/pen/mzHbf
++
<edit> mauvaise idée ...
Modifié par gc-nomade (15 Feb 2014 - 09:42)

Hello,

Un exemple de ce que l'on peut imaginer avec un positionnement absolut:

.conteneur { height:25rem; position:relative; overflow:hidden; }
.gauche { width:50%; position:absolute; top:-2000px; bottom:-2000px;left:0; }
img { position:absolute;top:0;bottom:0;width:100%;margin:auto;}

Le principe est un centrage à l'aide d'un margin auto associé à top et bottom de 0 (qui a l'avantage de nous libérer des marges négatives dépendantes de la taille de l'image). Le souci de cette technique (qui en général est plutôt un avantage, mais pas dans ton cas ^^) est que, si l'image est plus haute que le conteneur, elle va rester au haut à gauche au lieu de "disparaître" en haut comme avec les marges négatives(ce qui permettrait de conserver le centrage vertical).

Pour y pallier, l'idée est de faire en sorte que l'élément .gauche soit toujours plus haut que la hauteur que peut atteindre la plus haute des images sur un écran très large (d'où les top et bottom négatifs conséquents).

Bonjour et merci pour vos réponses!

gc-nomade, je crois me souvenir que vous m'aviez déjà aidée (sauvé la mise?) sur une question de centrage horizontal... décidément!

En tout cas, c'est votre solution que j'adopte, avec juste une mini-modification: je supprime la position absolue de l'image.

.conteneur { height:25rem; width:100%; overflow:hidden; }
.gauche { 
	height:100%; 
        width:50%;
	overflow:hidden; 
	display: inline-block; 
	vertical-align: middle; 
	line-height:25rem;
	position:relative;
}
.gauche img { 
	width:100%; 
	height:auto; 
	vertical-align:middle; 
	margin:-25% 0; 
}

et voilà, mon image fait 100% de sa boite en largeur, et est affichée exactement au centre de sa boite en hauteur, sans déborder!

Merci de vos contributions

En ajoutant un "display:table" au ".conteneur", ça aurait aussi marché sans passer par un "line-height" qui influe le reste des éléments.