[résolu] Centrer horizontalement une image dans l'élément <li>

Bonjour,

Sur cette page se trouve un carrousel d'images. Ces images sont positionnées en float:left. Elles sont inclues dans des liens, qui forment une liste non ordonnée.

On a donc un code HTML simplifié du genre :

<div>
	<ul class="roundabout-holder">
		<li class="roundabout-moveable-item"><a href="http://billet_1.thml"><img src="image_1.jpg" class="left" /></a></li>
		<li class="roundabout-moveable-item"><a href="http://billet_2.thml"><img src="image_2.jpg" class="left" /></a></li>
		etc.
	</ul>
</div>

Le code CSS correspondant est le suivant :

.roundabout-holder { width: 760px; height: 30em; margin: 1em auto; }
.roundabout-moveable-item { list-style: none; width: 20em; height: 20em; margin: 0; cursor: pointer; }
	.roundabout-moveable-item img { height: 100%; }

L'ennui, c'est que mes images ne sont pas centrées horizontalement dans l'élément "roundabout-moveable-item", qui fait 20em de largeur. Comment faire pour obtenir ce centrage horizontal ?

Merci de votre aide !
Modifié par Fix (28 Apr 2011 - 15:37)

J'ai supprimé le "float: left" sur l'image, qui était de toutes façons inutile, mais cela ne change rien...

Salut,
Essayes :

.roundabout-moveable-item a{display:block; text-align:center;}

Je ne peux pas mettre de "display: block;" sur l'élément <a> : cela empêche les images d'être redimensionnées verticalement. L'affichage serait donc totalement faussé.

J'ai essayé en live avec firebug, je n'ai pas vu de problème

Merci beaucoup de chercher à m'aider !

Je me suis permis de faire un petit screenshot d'avant et après la modif. que tu suggères :


Il s'avère que, une fois la modif. appliquée, les images ne sont plus redimensionnées lorsqu'elles ne sont pas à l'avant du carrousel.

Ces screenshots ont été effectués sous Firefox 4.0. Ce n'est pas ce que tu observes également de ton côté ?

Exact, j'avais pas fait attention aux images du fond ...
Bah ajoutes simplement un text-align:center sur ta classe .roundabout-moveable-item

non ?

Si ! Ça marche très bien ainsi. Un grand merci pour ton aide ! Je pensais avoir déjà testé ça... Apparemment, non

Bonjour tous

Ben j'ai essayé avec une class, mais je perd le inline.

Le site test

<ul class="gallery clearfix">
   <li class="center"><a href="../><img src............. /></a></li>
   <li class="center"><a href="../><img src............. /></a></li>
</ul>

ul li { 
  display: inline; 
}
.center{
  text-align: center;
  display: block;
}

Forcément puisque ton ul li et ton .center s'appliquent aux mêmes éléments, donc la 2eme règle s'applique par dessus la 1ère.

Si tu veux les caractéristiques de inline et de block tu peux utiliser inline-block :

ul li {  
  display: inline-block;
  text-align: center; 
} 

Modifié par jb_gfx (24 Jul 2011 - 14:07)