[Résolu] Liste UL LI centrée l'une au dessus de l'autre

Bonjour,
J’ai besoin de votre aide concernant les listes LI.
J’ai fait la une d’un site qui n’est pas encore en ligne sur cette une j’ai mis 5 photos avec un découpage rond et un roll over…
Ces 5 photos doivent apparaitre les unes a coté des autres.
Par contre quand on réduit la taille de l’écran une ou deux photos voir trois en fonction viennent à la ligne. Ce que je veux bien sur. Par contre, j’aimerais que lors de ce retour à la ligne les photos viennent se centrer sous les autres….
Photo de ce que je ne veux pas c'est à dire retour aligné à gauche :


Le code css :

#indeximages{

}

#indeximages ul {
font:20px "lucida grande", arial, sans-serif;
color:#990000;
padding:0 0 30px 30px;
margin:30px auto;
}

#indeximages  li {
width:200px;
height:200px;
float:left;
overflow:hidden;
margin:30px 30px 0 0;
border:2px solid black;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}
    
#indeximages   p {
height:200px;
padding:70px 0 0 0;
color:#990000;
text-align:center;
opacity: .8;
background:#000;
-webkit-transition: margin-top .0s ease-out;
-moz-transition: margin-top .0s ease-out;
transition: margin-top .0s ease-out;
}

#indeximages li a:hover p {
margin-top:-220px;
}
		

Le code HTML :

<div id="indeximages">
<ul>
<li>
<a href="<?php bloginfo('url'); ?>/fissures/" ><img src="<?php bloginfo('template_directory'); ?>/images/LogoFissure.jpg"/><p>Fissures</p> </a>
</li>
<li>
<a href="<?php bloginfo('url'); ?>" ><img src="<?php bloginfo('template_directory'); ?>/images/LogoGriffures.jpg"/><p>Griffures</p></a>

</li>
<li>
<a href="<?php bloginfo('url'); ?>" ><img src="<?php bloginfo('template_directory'); ?>/images/LogoLesrestes.jpg"/><p>Les restes</p>/a>

</li>
<li>
<a href="<?php bloginfo('url'); ?>" ><img src="<?php bloginfo('template_directory'); ?>/images/LogoLhabitacle.jpg"/><p>L'habitacle</p></a>

</li>
<li>
<a href="<?php bloginfo('url'); ?>" ><img src="<?php bloginfo('template_directory'); ?>/images/LogoTraces.jpg"/><p>Traces</p></a>

</li>
</ul>

Voila, j’ai vraiment chercher partout alors peut etre j’ai mal cherché ou avec les mauvais termes ou peut etre j’utilise pas le bon système donc si vous pouviez m’aider ou me mettre sur la voie.
Merci
Modifié par FrancoiseTech (12 Feb 2013 - 15:58)

bonsoir,

De base il te faut mettre tes li en : display:inline-block;(ou inline-table;), et text-align:center sur ul. Pas de float sur li , qui l'emporte sur display.

Cdt,

Effectivement, merci beaucoup pour ton aide.
Par contre, du coup j'ai un problème avec mes transition...
Mais je vais chercher et cela fera certainement une nouvelle question !

Bonsoir,

Peut-etre peut tu t'inspirer de : http://dabblet.com/gist/4262212

La structure html avec figure est probablement plus adapté et valide. Ton lien pourrait n'englober que l'image (avec son title du lien et son alt sur l'image qui vont bien) et gerer ton hover sur figure ?

Juste une proposition, pour le p , il est positionner en absolute et bottom avec un max-height de zero à 200px au lieu d'un margin-top positif/négatif

Cdt,
++

En fait, mon souci c'est pour faire apparaître le texte en fondu par dessus l'image et surtout au milieu de l'image. Et pour cela il faut qu'avant il soit caché.
Dans une figurecaption le texte se positionne à la base sous l'image.
Cordialement,