[Résolu] Centrer une liste de définition

Bonjour,
J'ai un problème de centrage d'une liste de définition...

Je souhaite mettre les <dl> sur une seule ligne (grâce à un float: left). La totalité des <dl> doit être centrée sur la page.

Puis dans chaque <dl>, les <dt> et <dd> doivent être en text-align: center.

Je suis un peu perdu, là...

L'exemple du menu haut de page est à cette adresse.

Mon code d'exempel:

<div id="menu">
<dl>
<dt>image</dt>
<dd>texte texte texte </dd>
</dl>
<dl>
<dt>image</dt>
<dd>texte texte texte </dd>
</dl>
</div>

Et le code css associé

dl {
	text-align: center;
	float: left;
	margin: 1em 2em;
	background-color: #CC0;
}

dt {
	text-align: center;
	margin: 0 0 .8em 0;
	width: 80px;
	height: 80px;
	border: 4px solid black;
}

Merci pour vos pistes
Modifié par speedlab (30 Dec 2010 - 15:24)

Salut,

Tu ne pourras pas centrer les éléments en les mettant en float left, il faut plutôt utiliser display: inline ou idéalement display: inline-block (mais ce n'est pas supporté par toutes les versions d'IE...)

Thomas,
J'avais déjà testé display: inline, auquel cas chaque <dl> était centrée, mais non-aligné avec la <dl> suivante...

Avec display: inline-block, le code css est devenu:

dl {
	text-align: center;
	display: inline-block;
	margin: 1em 2em;
	background-color: #CC0;
}

dt {
	text-align: center;
	margin: 0 0 .8em 0;
	width: 80px;
	height: 80px;
	display: inline-block;
}

Sur ff3.6 et saf5, le résultat est celui attendu.

En revanche, avec display-inline: block, le résultat n'est pas probant sur ie6 (je n'ai pas la possibilité de tester avec une version supérieure ).

Aurais-tu une piste pour forcer ie6 à bien comprendre?
Modifié par speedlab (30 Dec 2010 - 15:03)

Bon, je me réponds .

Donc l'utilisation de display: inline-block est la bonne piste.
Le résultat est bon avec ff3.6 et saf5.

Le code css est le suivant:

dl {
	text-align: center;
	display: inline-block;
	margin: 1em 2em;
}

dt {
	text-align: center;
	margin: 0 0 .8em 0;
	width: 80px;
	height: 80px;
	display: inline-block;
}

Pour qu'ie6 soit ok, j'ai lu la conclusion du très bon tutoriel de Benjamin D.C. sur la mise en page CSS avancée grâce à la propriété display. Il suffit simplement d'ajouter le commentaire conditionnel suivant:

<!--[if IE]>
	<style type="text/css" media="all">
	dl, dt {
		zoom:1;
		display: inline;
	}
	</style>
<![endif]-->

Je n'ai pu tester qu'avec ie6, et pas les versions supérieures...

Si quelqu'un a la patience de tester ça avec les versions supérieures à ie6, j'en serai ravi