Centrer une image verticalement dans un div

Bonjour à tous,

Voilà après moultes recherches, je n'ai pas trouvé de solutions à mon problème.
Je voudrais comme le titre l'indique, centrer une image verticalement ET horizontalement dans un conteneur div (ou td le cas échéant).
Le tout en XHTML strict et valide compatible IE5/6 Firefox, si possible
J'ai bien trouvé comment le faire pour un bloc dans une page, genre centrer un site au milieu du navigateur, mais pas une image dans un bloc.

Merci par avance pour votre aide

(je déplace dans le salon CSS et mise en forme)

D'abord je ne fais pas de XHTML. Alors corrige au cas où.

<div style="text-align:center;vertical-align:middle"/>
<img src="img0.jpg"/></div>

Modifié par Deny (21 Jul 2006 - 12:07)

Deny a écrit :
D'abord je ne fais pas de XHTML. Alors corrige au cas où.

<div style="text-align:center;vertical-align:middle"/>
<img src="img0.jpg"/></div>

Non vertical-align ne convient pas à cette utilisation. C'est pour alligner le texte par rapport à l'image

Essaye ça pour voir

<div style="text-align:center;vertical-align:middle"/>
<div style="float:left"/><img src="img0.jpg"/></div>
<div style="float:right"/>Mon texte</div>
</div>

Modifié par Deny (21 Jul 2006 - 12:44)

Salut

Vertical-align ne s'applique qu'aux éléments de tableau, il faut donc utiliser

display: table-cell;
vertical-align: middle;

mais de toutes façons ça ne fonctionne pas dans IE ...

Est-ce que les dimensions du conteneur et de l'image sont connues ou pas ?

Hello,

Est-ce que ceci peut aider ?
http://forum.alsacreations.com/faq/#item3

Raphael a écrit :
Hello,

Est-ce que ceci peut aider ?
http://forum.alsacreations.com/faq/#item3

Oui et non. En fait l'exemple de cette page marche bien pour FF, mais IE ne comprend pas table-cell. Il me faut cette compatibilité avec IE<7...
La seule parade consisterait alors à faire une véritable table juste pour centrer un élément image. Une hérésie pour moi. J'y viendrai si vraiment il n'y a pas d'autres solution, mais franchement je préfère éviter.

Sopo a écrit :
Est-ce que les dimensions du conteneur et de l'image sont connues ou pas ?

Si toutes mes images avait la même dimension, je ne me prendrait pas la tête Tout ce que je sais, c'est qu'elle ne dépassent que très rarement les 200px de hauteur. Partant de la j'ai décidé de fixer mon conteneur à 210px.

je ne suis pas un expert, mais essaye un truc dans ce genre peut-être :

#liens {
position:absolute;
left:737px; (pour positionner horizontalement)
top:3px; (pour positionner verticalement)
width:110px;
height:35px;
background-image:url(accueil.jpg);
layer-background-image:url(accueil.jpg);
border:1px none #000000;
z-index:18;
}

<div class="Style4" id="liens">
<div align="right"><a href="http://www.marcynema.org/blog" class="Style4">Blog marcyn&eacute;ma</a> <a href="mailto:contact@marcynema.org" class="Style4">Nous &eacute;crire</a></div>
</div>
Modifié par fbinfographie (21 Jul 2006 - 14:56)

fbinfographie a écrit :
je ne suis pas un expert, mais essaye un truc dans ce genre peut-être

Il s'agit justement de la première solution évoquée dans le point de la FAQ que j'ai donné précédemment.
Sauf qu'il te manque une partie importante (les marges négatives) sinon ton centrage sera très aléatoire.

PS : merci de bien vouloir afficher les codes correctement, comme le suggèrent les Règles du forum, c'est à dire en utilisant les tags [code ] ... [/ code] (sans les espaces)
Modifié par Raphael (21 Jul 2006 - 15:03)