Centrage vertical

Bonjour à tous,

j'aimerai centrer mon image dans mon div.
J'arrive à le faire horizontalement, mais pas verticalement :

div.photo
{
	border:solid 1px yellow;
	width:100px;
	height:100px;
	text-align:center;
	margin:auto 0 0 0;
}
img.imgphoto
{
	border:solid 1px gray;
}

<div class="photo">
    <img src="maphoto.png" alt="" class="imgphoto" />
</div>

Mon image fait bien sur moins de 100 de large et moins de 100 de haut.
Je pensais que le margin auto aurait suffit.

Que faut-il faire ?

Merci de vos réponses
Je pensais

Une petite recherche dans la section "Apprendre" donne cette réponse

Le centrage vertical est particulièrement difficile à mettre en place.

Si tu connais la hauteur de tes images, tu peux facilement déterminer les marges haute et basse à appliquer à .photo. (=(100-hauteur)/2). Si les images ont une hauteur variable, à moins de récupérer cette valeur via php (voir exif), ça va être plus difficile.

EDIT : Tu as fait une erreur dans ton code, actuellement, seul la margin-top est à auto, les autre sont à 0, l'image ne sera donc pas non plus centrée horizontalement (il faut mettre "margin: 'marge pour top et bottom' auto; pour que l'image soit centrée).
Modifié par Laurie-Anne (09 Mar 2009 - 14:15)

Ok, merci de ta réponse.

Je vais donc devoir utiliser la taille de mes images pour les centrer, vive le javascript.

Merci de ton aide

Je ne pense pas que javascript soit la seule solution, PHP permet de récupérer ces données :

via exif : http://be2.php.net/manual/fr/function.exif-read-data.php
ou via la librairie GD : http://be2.php.net/manual/fr/function.getimagesize.php

Si tu peux les utiliser, ce sera plus propre que JS et fonctionnera sur toutes les configurations.

bonjour,

il n'est peut-etre pas necessaire de faire usage d'un script.

un conteneur , une image : le line-height et un vertical-align sont tout indiqué moyennant l'insertion de texte , texte qui peut-etre un simple caractére insécable.
.

 

Ce qui donne :

<div class="photo">
    <img src="maphoto.png" alt="" class="imgphoto"  />[b]&nbsp;[/b]
</div>

et le css appliqué :

div.photo
{
	border:solid 1px yellow;
	width:100px;
	height:100px;
line-height:100px;
	text-align:center;
	margin:auto 0 0 0;
}

img.imgphoto
{
vertical-align:middle;
	border:solid 1px gray;
}

La hauteur de l'image n'a plus d'importance , seul son alignement sur le texte (espace inséré) déterminera sa positon. Le line-height doit correspondre a la hauteur de la boite elle-même .

Une image a le comportement d'un élément de type inline-block ou vice-versa , ils ont donc la capacité d'etre alignés verticalement aux élément de type inline ou inline-block dans le flux(pas de float hein ) qu'il cotoient ...

GC
Modifié par gcyrillus (10 Mar 2009 - 18:01)