28220 sujets

CSS et mise en forme, CSS3

Centrer verticalement une image de taille inconnue

Mon problème est de placer une image, dont je ne connais pas la taille, dans un DIV dont je connais les dimensions.

La taille de mon image est compatible avec celle du DIV (plus petite).

J'ai essayé vertical-align: middle; sans succés.
La technique des marges négatives impose de connaitre la dimension de l'image donc n'est pas applicable ici. Pas plus que margin: auto;

Alors pas de solution ?
Modifié par pat665 (25 Apr 2005 - 08:44)
Je me répond à moi-même.

J'ai trouvé un centrage acceptable avec vertical-align: middle; à condition de fixer la hauteur de ligne du bloc avec line-height ainsi :

	div#photo_display {
		width: 580px;
		height: 440px;
		background-color: #ddd;
		text-align: center;
		line-height: 440px;
	}
		
	div#photo_display img {
		border: 30px solid #333;
		vertical-align: middle;
	}


	<div id="photo_display">
		<img src="fleurs.jpg" alt="Coquelicots" />
	</div>

Modifié par pat665 (23 Apr 2005 - 20:46)
Bonjour Smiley ohwell et bienvenue,

Merci de lire Aides/Règles pour apprendre entre autre à bien présenter du code sur le forum.

Comme ton problème semble réglé, il reste à lui mettre une tag résolu dans le titre de ton sujet, comme expliqué dans la faq. Smiley cligne
Administrateur
pat665 a écrit :
J'ai trouvé un centrage acceptable avec vertical-align: middle;

Salut et bienvenue sur le forum.

Vertical-align n'est pas fait pour cela. Par contre, comme tu t'en doutes, ta question est souvent posée et la réponse se trouve dans la FAQ :
http://forum.alsacreations.com/faq/#item3

A bientôt Smiley cligne
Finalement, mon problème n'est pas résolu. Le vertical-align ne fonctionne pas sur mon IE6 et de plus il m'a été déconseillé ici-même.

Reste la FAQ, mais sauf erreur de ma part, elle ne permet que de centrer un bloc dont la hauteur est connue à l'avance. Ce n'est pas mon cas. J'ai une image à centrer. Tout ce que je sais, c'est qu'elle est assez petite pour tenir dans le DIV, mais je ne connais pas sa hauteur.

Je cherche touours une solution ...
Salut

Raphael a prétendu
a écrit :
Non non, la FAQ prend bien ton cas en compte :
Pour aligner du texte (ou une balise inline) dans un bloc :
http://marcarea.com/weblog/index.php/?2004/10/18/182-10-astuces-css-correction

Tu as bien une balise inline (<img>) contenue dans un bloc (<div>). C'est donc tout à fait adapté cligne


Cette technique marche bien dans Firefox, mais IE6 ne centre pas. J'ai fait un mini exemple de test qui le montre bien.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<style>
	* { margin: 0; padding: 0; }
	body {font-family: "Trebuchet ms", helvetica, arial, sans-serif; font-size: x-small; }
	div#photo_display {height: 440px; line-height: 440px; text-align: center; background-color: #ccc }
	div#photo_display a {line-height: 440px;}			
	div#photo_display img {vertical-align: middle; border: none}
</style>
</head>

<body>
	<div id="photo_display">
		<a href="#">test <img src="http://forum.alsacreations.com/avatars/1-rafcv.jpg" alt="Test" ></a>
	</div>
</body>
</html>


Ou bien je fais une erreur grossière, ou bien le problème n'est pas si trivial.

Merci en tous cas pour la réactivité de ce forum Smiley smile
Modifié par pat665 (24 Apr 2005 - 16:25)
Sujet clos
Aller à