Liste horizontale d'images cliquable le tout centré dans un bloc

Bonjour à tous,

J'ai toujours l'habitude de chercher par moi-même mais là, je vous avouerai que je suis coincé.

J'aimerai créer une liste d'images (donc de blocks) horizontale (donc du inline) cliquable et le tout centré dans un block (donc du margin-left:auto et margin-right:auto) mais impossible de trouver le moyen d'appliquer les 3 en même temps.

Je me suis donc orienté vers un float:left sur chaque <li> de la liste mais bon impossible de centrer le tout dans un bloc après ça avec un margin-left:auto et margin-right:auto. Sachant que cette liste sera dynamique, je ne peux pas utiliser non plus un banal margin-left pour placer la liste au pixel près au milieu.

Je vous met mon code ci-dessous

#milieupage
{
margin-right:auto;
margin-left:auto;
width:523px;
height:30px;
}

#milieupage ul
	{
	padding:0px;
	margin:0px;
	list-style-type:none;
	}
	
		#milieupage ul li
		{
	
		}
		
		#milieupage ul li a:link,
		#milieupage ul li a:visited
		{
		text-decoration:none;
		width:22px;
		height:30px;
		background-image:url(../img/milieu_page_liens_all.jpg);
		margin:0;
		padding:0;
		background-repeat:no-repeat;
		float:left;
		line-height:30px;
		padding-left:6px;
		text-align:center;
		}
		
		#milieupage ul li a:hover
		{
		background-position:0 -30px;
		color:#FFFFFF;
		}
		
		#milieupage ul li:first-child a:link,
		#milieupage ul li:first-child a:visited
		{
		background-image:url(../img/milieu_page_liens_1.jpg);
		width:32px;
		padding-left:8px;
		width:24px;
		}
		
		#milieupage ul li:first-child a:hover
		{
		background-position:0 -30px;
		color:#FFFFFF;
		}
		
		#milieupage ul li:last-child a:link,
		#milieupage ul li:last-child a:visited
		{
		background-image:url(../img/milieu_page_liens_last.jpg);
		padding-left:0px;
		width:35px;
		}
		
		#milieupage ul li:last-child a:hover
		{
		background-position:0 -30px;
		color:#FFFFFF;
		}

Merci pour votre aide, je vous avouerai que je bloque sévèrement.

Avec le XHTML, ça serait plus simple.

J'imagine que #milieupage est ton container... pourquoi ne pas mettre un bête :

#milieupage {
text-align:center;
}

pour en centrer le contenu ?

Moi je mettrais un block wrapper autour en text-align: center; et son fils (#milieupage) en display inline; ca devrait le center.
C'est jamais très évident ce genre de cas :s

Bonjour,

Et sinon, en faisant simple?

#blabla {
  text-align: center;
}
#babla li {
  display: inline; /* "list-item" par défaut */
}
#blabla li a {
  display: inline; /* par défaut */
  float: none; /* par défaut */
}
#blabla li a img {
  vertical-align: middle; /* pas indispensable */
}

Cela marchera bien avec des éléments IMG dans les liens (ce que tu devrais avoir, vu que tu parles d'une liste d'images).

Autrement, si tu as vraiment besoin de donner des dimensions explicites aux liens, la solution consiste en théorie à utiliser display:inline-block. Il faut savoir cependant que ce n'est pas supporté par Firefox 2 (pas très grave mais pas négligeable), et que partiellement par IE 6 et 7 (OK dans IE8).

Il y a d'autres solutions éventuelles, mais elles ont toutes leurs caractéristiques et leurs limitations propres.