Come posso allineare al centro il menu <UL> orizzontale?

Devo allineare al centro un menu orizzontale.
Ho provato varie soluzioni, incluso il mix di inline-block/ block/ center-alignecc., Ma non ci sono riuscito.

Ecco il mio codice:

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

AGGIORNARE

So allineare al centro l' ulinterno div. Ciò può essere realizzato usando il suggerimento di Sarfraz. Ma gli elementi dell'elenco vengono comunque spostati a sinistra all'interno di ul.

Ho bisogno di Javascript per raggiungere questo obiettivo?

Da http://pmob.co.uk/pob/centred-float.htm :

La premessa è semplice e fondamentalmente implica solo un involucro float senza larghezza che viene spostato a sinistra e quindi spostato dallo schermo alla posizione di larghezza sinistra: relativo; sinistra: -50%. Successivamente l'elemento interno nidificato viene invertito e viene applicata una posizione relativa di + 50%. Ciò ha l'effetto di posizionare l'elemento morto al centro. Il posizionamento relativo mantiene il flusso e consente agli altri contenuti di fluire al di sotto.

Codice

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

Questo funziona per me. Se non ho frainteso la tua domanda, potresti provarla.

    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>

Con flexbox CSS3. Semplice.

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

ul li {
  padding: 0 8px;
}

Questo è il modo più semplice che ho trovato. Ho usato il tuo HTML. Il riempimento serve solo per ripristinare le impostazioni predefinite del browser.

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>

Ecco un buon articolo su come farlo in un modo abbastanza solido, senza hack e supporto completo per tutti i browser. Per me va bene:

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

Prova questo:

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

Fai cosi :

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

E il 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;
}

Come molti di voi, ho lottato con questo per un po '. Alla fine la soluzione aveva a che fare con il div contenente l'UL. Tutti i suggerimenti su come alterare l'imbottitura, la larghezza, ecc. Dell'UL non hanno avuto alcun effetto, ma lo hanno fatto.

Si tratta solo margin:0 auto;del div contenente. Spero che questo aiuti alcune persone e grazie a tutti coloro che l'hanno già suggerito in combinazione con altre cose.

.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;
}

Demo - 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 molto più pulito.

In generale, il modo per centrare un elemento di livello nero (come a <ul>) sta usando la margin:auto;proprietà.

Per allineare testo e incorporare elementi di livello all'interno di un elemento di livello blocco, utilizzare text-align:center;. Quindi tutti insieme qualcosa come ...

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 */
}

... dovrebbe funzionare.

Il caso marginale è Internet Explorer6 ... o anche altri IE quando non si utilizza a <!DOCTYPE>. IE6 allinea erroneamente gli elennts a livello di blocco usando text-align. Quindi se stai cercando di supportare IE6 (o non usi a <!DOCTYPE>) la tua soluzione completa è ...

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 */
}

Come nota a piè di pagina, penso che id="topmenu firstlevel"non sia valido in quanto un idattributo non può contenere spazi ...? In effetti la raccomandazione di W3C definisce l' idattributo come un tipo di 'nome' ...

I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da un numero qualsiasi di lettere, cifre ([0-9]), trattini ("-"), caratteri di sottolineatura ("_") , due punti (":") e punti (".").

Ho usato il display: proprietà inline-block: la soluzione consiste nell'utilizzare un wrapper con larghezza fissa. All'interno, il blocco ul con il blocco in linea per la visualizzazione. Usando questo, l'ul prende solo la larghezza per il vero contenuto! e infine margin: 0 auto, per centrare questo blocco 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;
}

io uso il codice jquery per questo. (Soluzione alternativa)

    $(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 come inline-table risolve il problema con. Ho usato il div genitore per allineare il testo al centro. in questo modo sembra buono anche in altre lingue (traduzione, larghezza diversa)

La soluzione di @ Robusto è stata la più semplice per quello che stavo cercando di fare, ti suggerisco di usarla. Stavo cercando di fare la stessa cosa per le immagini in un elenco non ordinato per creare una galleria ... Ho fatto un violino per scherzare con esso. Sentiti libero di provarlo qui.

[è stato impostato usando il codice di esempio 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%}

È un'approssimazione decente su grandi schermi. Non è buono, ma è una buona soluzione sporca.

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

Tutto qui!