28172 sujets

CSS et mise en forme, CSS3

[Résolu] Centrer une image verticalement dans un élément de liste

Hello,

dans un élément de liste li j'ai une image que je n'arrive pas à centrer en hauteur
Je pensais y arriver avec cette instruction mais ça n'a pas l'air de vouloir fonctionner... 

#mon_ul li img { margin:auto 0;}


Vous en pensez quoi ?
Modifié par hitzerod (01 Oct 2010 - 11:48)
@Laurie-Anne
Merci oui et sauf si j'ai mal cherché, je n'arrive pas à savoir si j'ai un conflit ou si ce n'est pas la bonne méthode.
J'ai également testé en vain avec un display:block sur le li.
Modifié par hitzerod (01 Oct 2010 - 11:03)
Raphael a écrit :
Hello,

Ou encore une autre piste Smiley cligne

Merci mais cela ne semble pas fonctionner non plus.


Je vais continuer à chercher.

Si ça vous intéresse voici une courte page test prête à l'emploi :


<!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>
<title>Test aligner verticalement une image dans un li</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
    ul {list-style-type:none}
    li {width:200px; height:200px; border:solid 1px #333}
    li img {margin:auto 0;} /* not ok */
</style>
</head>
<body>
<ul>
    <li><img src="http://www.alsacreations.com/css/img/menu-li-forum.png" /></li>
    <li><img src="http://www.alsacreations.com/css/img/menu-li-forum.png" /></li>
</ul>
</body>
</html>

On cherche à centrer verticalement l'image dans le li...
Modifié par hitzerod (01 Oct 2010 - 11:26)
Bon c'est résolu comme suit :

li {vertical-align : middle; display : table-cell;}


Sauf pour IE7 et 6...
Administrateur
hitzerod a écrit :
Bon c'est résolu comme suit :

li {vertical-align : middle; display : table-cell;}


Sauf pour IE7 et 6...


Il te manquait une dernière ressource Smiley smile
Comment centrer verticalement sur tous les navigateurs ?

Voici comment faire :

    li {width:200px; height:200px; [b]line-height:200px;[/b] border:solid 1px #333;
    [b]li img {vertical-align: middle}[/b]


Ce sera OK sur IE7. Par contre IE6 Smiley rolleyes
Modifié par Raphael (01 Oct 2010 - 15:51)
Sujet clos
Aller à