[CSS] centrer un élément

Bonjour à tous,
Mon souhait est de centrer le menu déroulant de cette page http://eternity.lpo.free.fr/site_xhtml/ dont voici la feuille de style http://eternity.lpo.free.fr/site_xhtml/style/menus.css.

Le code xhtml du menu est celui-ci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
      <div id="menu">
      <dl>
         <dt onmouseover="montre('smenu1');"><a href="/site_xhtml/index.php?js=no">Menu 1</a></dt>
            <dd id="smenu1">
 
               <ul>
                  <li><a href="/site_xhtml/index.php#1.1">Sous-Menu 1.1</a></li>
                  <li><a href="/site_xhtml/index.php#1.2">Sous-Menu 1.2</a></li>
                  <li><a href="/site_xhtml/index.php#1.3">Sous-Menu 1.3</a></li>
                  <li><a href="/site_xhtml/index.php#1.4">Sous-Menu 1.4</a></li>
                  <li><a href="/site_xhtml/index.php#1.5">Sous-Menu 1.5</a></li>
 
               </ul>
            </dd>
      </dl>
      <dl>
         <dt onmouseover="montre();"><a href="/site_xhtml/index.php#2">Menu 2</a></dt>
      </dl>
      <dl>
         <dt onmouseover="montre('smenu2');"><a href="/site_xhtml/index.php?js=no">Menu 3</a></dt>
 
            <dd id="smenu2">
               <ul>
                  <li><a href="/site_xhtml/index.php#3.1">Sous-Menu 3.1</a></li>
                  <li><a href="/site_xhtml/index.php#3.2">Sous-Menu 3.2</a></li>
                  <li><a href="/site_xhtml/index.php#3.3">Sous-Menu 3.3</a></li>
               </ul>
            </dd>
 
      </dl>
 
      </div>

Pour l'instant, j'ai tenté un text-align: center sur #menu, j'ai aussi tenté de mettre #menu dans un autre div, mais il en "sort" (à cause du float: left de menu surement).

Je m'en remet donc à vous en éspérant que vous saurez trouver une solution. Merci de votre aide.

Etant donné que ton menu est en position absolue, tu peux utiliser un centrage avec les marge negatives.

Ton code:
Code:

1 2 3 4 5 6 7 #menu { position: absolute; top: 450px; z-index:100; margin-left: auto; margin-right: auto; }
A remplacer par
Code:

1 2 3 4 5 6 7 8 9 #menu { position: absolute; top: 450px; z-index:100; /* modifications */ left: 50%; margin-left: -9em; /* voir explication */ }
Le margin-left: -9em; s'explique par le fait que tu as 3 dl de 6em donc un #menu qui fait une largeur de 18em. On divise 18 par 2 pour centrer le menu.

Merci.