Comment centrer aligner le menu horizontal?

Cela fonctionne pour moi. Si je n'ai pas mal interprété votre question, vous pourriez essayer.

    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>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

Avec CSS3 flexbox. Simple.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

C'est le moyen le plus simple que j'ai trouvé. J'ai utilisé votre code html. Le remplissage est juste pour réinitialiser les paramètres par défaut du navigateur.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}

<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>

Voici un bon article sur la façon de le faire d'une manière assez solide comme le roc, sans aucun hacks et support multi-navigateur complet. Fonctionne pour moi:

--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Faites-le 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;
}

Comme beaucoup d'entre vous, je me bats avec ça depuis un moment. La solution a finalement eu à voir avec la div contenant L'UL. Toutes les suggestions sur la modification du rembourrage, de la largeur,etc. de L'UL n'a eu aucun effet, mais ce qui suit a fait.

, Il est tout au sujet de la margin:0 auto; sur le div contenant. J'espère que cela aide certaines personnes, et merci à tous ceux qui ont déjà suggéré cela en combinaison avec d'autres choses.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}

Essayez ceci:

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

D'une manière générale, la façon de centrer un élément de niveau noir (comme un <ul>) utilise la propriété margin:auto;.

Pour aligner des éléments de niveau texte et en ligne dans un élément de niveau bloc, utilisez text-align:center;. Donc, tous ensemble quelque chose comme...

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

... devrait fonctionner.

L'affaire fringe est Internet Explorer6... ou même D'autres IEs lorsque vous n'utilisez pas un <!DOCTYPE>. IE6 aligne incorrectement les éléments de niveau de bloc en utilisant text-align. Donc, si vous cherchez à soutenir IE6 (ou ne pas utiliser un <!DOCTYPE>) votre plein la solution est...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

En tant que note de bas de page, je pense que id="topmenu firstlevel" est invalide car un attribut id ne peut pas contenir d'espaces... ? En effet, la recommandation W3C définit l'attribut id comme un type 'name' ...

Les jetons ID et NAME doivent commencer par un lettre ([A-Za-z]) et peut être suivie par n'importe quel nombre de lettres, chiffres ([0-9]), tirets ( " - " ), traits de soulignement ("_"), deux-points ( " :") et points (".").

J'ai utilisé la propriété display: inline-block: la solution consiste à utiliser un wrapper avec une largeur fixe. A l'intérieur, le bloc ul avec le bloc en ligne pour l'affichage. En utilisant cela, l'ul prend juste la largeur pour le contenu réel! et enfin margin: 0 auto, pour centrer ce bloc inline=)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}

Démo - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Omg tellement plus propre.

J'utilise du code jquery pour cela. (Solution Alternative)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

Ul comme inline-table corrige le problème avec. J'ai utilisé le div parent pour aligner le texte au centre. de cette façon, il semble bon même dans d'autres langues (traduction, largeur différente)

La solution de@Robusto était la plus simple pour ce que j'essayais de faire, je vous suggère de l'utiliser. J'essayais de faire la même chose pour les images dans une liste non ordonnée pour faire une galerie... J'ai fait un violon js pour m'amuser avec ça. Se sentir libre de essayer ici.

[il a été configuré en utilisant l'exemple de code de robusto]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

CSS:

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

ul{margin-left:33%}

Est une approximation décente sur les grands écrans. Ce n'est pas bon, mais une bonne solution sale.

.topmenu-design
{
    display: inline-table;
}

C'est tout!