28172 sujets

CSS et mise en forme, CSS3

Centrage vertical et horizontal d'une image dans un div

Bonjour à tous,

Un sujet déjà évoqué à maintes reprises mais je n'ai pas trouvé de solution à mon cas: le centrage.

J'ai un div positionné en float:left. Il a une taille fixe connue à l'avance de 50x50 pixels.

A l'intérieur de ce div, j'ai une image img (et rien d'autre). Je ne connais pas à l'avance la taille de cette image (je sais juste qu'elle ne dépasse pas 50x50 pixels). Je souhaite que cette image soit centrée horizontalement ET verticalement dans le div...

J'ai fait plusieurs essais, notamment margin:auto qui m'a permis de centrer horizontalement l'image. Ensuite, pour le centrage vertical, j'ai essayé ces techniques de centrage, mais je n'ai rien trouvé qui permette de centrer verticalement ET horizontalement mon image. (J'ai par moments réussi à avoir un centrage vertical, mais je perdait dans ce cas le centrage horizontal Smiley fache ).

Si quelqu'un s'est déjà frotté à un cas similaire, merci d'avance pour son aide Smiley lol
Hello,

Bon, j'ai réussi mais ça ne fonctionne pas sous IE6 (je n'ai pas encore testé sous IE7/8, mais je pense que ça doit marcher).

<div>
  <img .../>
</div>


div { height:50px; width:50px; line-height:50px; text-align:center; }
div img { vertical-align:middle; }


Précisions: ça marche parce que je n'ai pas de texte, je n'ai qu'une seule image dans ma div et rien d'autre (dans d'autres circonstances, il ne serait peut-être pas possible d'utiliser line-height).

Quelqu'un a une idée pour IE6 ?

Merci Smiley biggrin
Bonjour,

Pour centrer verticalement plusieurs lignes de texte, la seule solution robuste et qui prenne en compte IE6, c'est d'utiliser un tableau.
Et pour une seule ligne ? Dans mon cas, le vertical-align:middle ne fonctionne pas sous IE6. (Je n'ai qu'une seule ligne, et ce n'est même pas du texte, c'est une image.)

J'ai peut-être loupé quelque chose Smiley bawling

Merci Smiley biggrin
Rien à faire, ça ne veut pas sous IE6 Smiley biggol

Voici la version actuelle de mon code:

<div class="div1">
    <a class="lienSmil" onclick="..." href="javascript:;">
        <img src="...">
    </a>
    <a class="lienSmil" onclick="..." href="javascript:;">
        <img src="...">
    </a>
    <a class="lienSmil" onclick="..." href="javascript:;">
        <img src="...">
    </a>
    ...
</div>


div.div1 { position:absolute; top:50px; left:3px; width:434px; height:327px; overflow:auto; }
div.div1 a.lienSmil { display:block; float:left; line-height:52px; text-align:center;  height:54px; width:54px; border:1px solid #cccccc; }
div.div1 a.lienSmil img { vertical-align:middle; }


Rappel: Les images ont une taille non connue à l'avance. Elles sont toujours plus petites que le "a". Elles doivent être centrées verticalement et horizontalement.

Le soucis: Le centrage vertical ne marche pas sous IE6 (l'image est positionné en haut du "a").

Merci Smiley lol
Hello,

Non, je ne connaissais pas cette technique. Elle me paraît intéressante, mais assez compliquée. J'essayerai ce soir, mais je n'ai pas beaucoup d'espoir Smiley decu

J'aimerais bien que Laurie-Anne jette un oeil à mon code en fait Smiley biggol

Bonne fin d'année Smiley smile
Sujet clos
Aller à