Comment centrer l'alignement du menu horizontal <UL> ?

J'ai besoin d'aligner au centre un menu horizontal.
J'ai essayé plusieurs solutions, y compris le mélange de inline-block / block / center-align etc., mais je n'ai pas réussi.

Voici mon code :

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

UPDATE

Je sais comment aligner au centre le ul dans le div. Je peux le faire en utilisant la suggestion de Sarfraz. Mais les éléments de la liste sont toujours flottants à gauche dans le ul.

Ai-je besoin de Javascript pour y parvenir ?

Saurav Rastogi
Question modifiée 1er décembre 2016 в 3:48
Programmation
xhtml css menuitem
19 mai 2010 в 12:21
9 vues

Cela fonctionne pour moi. Si je n&#8217ai pas mal interprété votre question, vous pouvez l&#8217essayer.

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }
<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 2</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>
Robusto
Réponse modifiée 25 avril 2016 в 2:02
Commentaires (8)

Essayez ça :

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
Commentaires (1)

Faites comme ceci :

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

Et le CSS :

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}
Commentaires (1)