Centrer un bloc comportant des éléments flotant

Bonjour,

Je souhaite centrer un menu type "onglet" (réalisé avec un élément liste pour base mais affiché horizontalement) dans un bloc.
Comment faire svp?

Voici mon code type pour le HTML du menu contenu dans son bloc :

<div>
<ul>
<li><a>item 1</a></li>
<li><a>item 2</a></li>
</ul>
</div>

Voici le CSS qui accompagne ce code

div
{
}

div ul
{
list-style-type:none;
}

div ul li
{
float:left;
}

div ul li a
{
display:block;

height:20px;
width:150px;
}

Bien entendu le code ci-dessous est simplifié au max avec uniquement les propriétés importantes, pour que ce soit plus lisible.
Aussi ces propriétés sont essentielles à ma mise en page, donc pas possible de les enlever à priori (ex : le A contenu dans le LI doit être affiché comme un bloc).

Il doit y avoir un moyen de le faire mais impossible de trouver .

Merci d'avance pour vos contributions!

Bonjour,

Si tu connais le nombre d'éléments du menu à l'avance, et que ces éléments ont une largeur fixe, tu peux donner une largeur fixe à ton menu, et le centrer avec des marges automatiques (margin: 0 auto).

Sinon, utiliser display: inline-block pour les LI (et peut-être les A également), mais pas compatible IE6 et 7 ou Firefox 2.

En dernier recours, tu peux utiliser un tableau (une ligne, et une cellule par item du menu) centré avec margin: 0 auto (le tableau n'a pas besoin d'avoir de largeur pour que ça marche).

Salut Florent V.,

Merci pour ta réponse.

Pour la taille fixe c'est effectivement ce que j'utilise actuellement.
Mais dans l'idée ce menu doit pouvoir évoluer, donc la taille fixe est une contrainte que j'aimerais lever.

Bien entendu la compatibilité "tout navigateur" est indispensable.

Le sujet cours toujours!

bonjour ,

rapidement car au boulot ....


http://gcyrillus.free.fr/essai/ul_centre_FF2&3_IE_6_7.html

encore l'uage du display:table; mis a profit pour FF2 , qui semble encore plus un mauvais gars , maintenant que ff3 est sortit.

Le code en parait d'autant plus comprehensible car le display:inline-block; (adapté ici en mode standard pour IE sur ces elements de type block) n'en rend que le concept plus logique.

IE : en mode standard sur les elements de type block; display:inline-block; devient : display:inline; + zoom:1; + text-align:center (ici pour le centrage de ul)

ff2 : display:table + margin:auto sur le contenuer ul .

ff3 et les autres display:inline-block; + text-align:center sur le parent ; (div)

a quand un tuto sur alsa sur l'usage ou non du dispaly:table et du layout sur IE ? par des 'academicien du web

GC