28172 sujets

CSS et mise en forme, CSS3

Centrage vertical

Bonjour à tous ,
J'ai lu avec beaucoup d'intérêt le tuto sur le centrage vertical mais quelque chose doit m'échapper ! Pas moyen de centrer une image verticalement dans un div.

Voici ce que j'ai fait : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div {
  width: 95px;
  height: 95px;
  line-height: 95px; /*centrage vertical du contenu*/
  text-align: center;
  border: 1px solid #ece9d8;
  background-color: #fff; 
}

img{
 vertical-align:middle;
}
</style>
</head>
<body>
	<div class="apercu"><img alt="Controls" src="02-redo.png"></div>
	<div class="apercu"><a href=""><img alt="Controls" src="02-redo.png"></a></div>
</body>
</html>


Quand il sagit juste d'un lien pas de problème , mais une image ou une image dans un lien , ca ne fonctionne pas, l'image reste désespérément coller en haut de mon div.

Y'a quelque chose que j'ai loupé ou bien ?

merci
Je ne sais pas si c'est la solution mais en tout cas tu as oublié de fermer tes balises <img>

<img alt="Controls" src="02-redo.png">


...
<img alt="Controls" src="02-redo.png" />
MErci pour ta réponse , mais ce n'est pas ça , j'ai été un peu trop vite en recopiant mon code Smiley smile (vivement le WE ^^ )
Bonjour, et avec ça ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
.apercu { 
display:table-cell;
vertical-align:middle;
text-align: center;
width: 95px; 
height: 95px;
border: 1px solid #ece9d8; 
background-color: #fff; 
} 
</style> 
</head> 
<body> 
    <div class="apercu"><img alt="Controls" src="02-redo.png"></a></div> 
</body> 
</html>
Salut,
le table-cell centre bien l'image sur les navigateurs qui le supporte , mais sous ie7 par exemple ça ne fonctionne pas.
Bonjour, Smiley smile

Après quelques tests, il semblerait que le problème vienne de ta DTD.

Certaines solutions exposées dans le tuto ne fonctionnent qu'avec un doctype Strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Etrange... Smiley sweatdrop

Au passage, si tu veux centrer verticalement sur IE7, n'oublie pas de mettre des espaces ou un <span> autour de l'image.


EDIT :
Pas si étrange que ça, le coup du doctype. Je viens de tomber sur cet article, qui explique qu'en plus du mode de rendu "quirks" et "standard", il existe un mode "presque standard". Ce dernier se déclenche notamment quand on utilise un doctype transitionnel, et peut provoquer des comportements bizarres avec les images...
Modifié par BeliG (07 Jun 2010 - 12:28)
Merci pour cette réponse très complète !

Je vais voir ce que je peux faire pour changer ma DTD
Sujet clos
Aller à