Come posso centrare il menu orizzontale allineato?

Ho bisogno di centrare allineare un menu orizzontale.
Ho provato varie soluzioni, incluso il mix di inline-block / block / center-align ecc., Ma non ci sono riuscito.

Ecco il mio codice:

  

AGGIORNARE

So come centrare allineare l’ ul all’interno del div . Questo può essere realizzato usando il suggerimento di Sarfraz. Ma gli elementi della lista sono ancora flottanti rimasti all’interno ul .

Ho bisogno di Javascript per realizzare questo?

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

La premessa è semplice e in pratica riguarda solo un wrapper float senza larghezza che viene flottato a sinistra e quindi spostato fuori dallo schermo nella posizione di larghezza a sinistra: relativo; sinistra: -50%. Successivamente l’elemento interno annidato viene invertito e viene applicata una posizione relativa di + 50%. Questo ha l’effetto di mettere l’elemento morto al centro. Il posizionamento relativo mantiene il stream e consente il stream di altri contenuti 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*/ 
  

Questo funziona per me. Se non ho interpretato male la tua domanda, potresti fare un tentativo.

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

Con la 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 padding serve solo per ripristinare i valori predefiniti del browser.

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

Ecco un buon articolo su come farlo in un modo abbastanza rock-solido, senza alcun hack e pieno supporto cross-browser. Per me va bene:

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

Fai cosi :

   

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 tanti di voi, ho lottato con questo per un po ‘. La soluzione in definitiva ha a che fare con il div contenente l’UL. Tutti i suggerimenti su come modificare l’imbottitura, la larghezza, ecc. Dell’UL non hanno avuto alcun effetto, ma ha fatto quanto segue.

Riguarda il margin:0 auto; sul div contenitore Spero che questo aiuti alcune persone, e grazie a tutti coloro che hanno già suggerito questo 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; } 

Prova questo:

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

In generale, il modo di centrare un elemento di livello del nero (come un

    ) sta usando il margin:auto; proprietà.

    Per allineare il testo e gli elementi di livello inline all’interno di un elemento a livello di 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 un . IE6 allinea in modo errato gli elemnts a livello di blocco usando text-align . Quindi se stai cercando di supportare IE6 (o non usare un ) 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 attributo id non può contenere spazi …? In effetti, la raccomandazione w3c definisce l’attributo id come un tipo “nome” …

    I token ID e NAME devono iniziare con una lettera ([A-Za-z]) e possono essere seguiti da qualsiasi numero di lettere, cifre ([0-9]), trattini (“-“), trattini bassi (“_”) , 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, gli ul prendono solo la larghezza per il contenuto reale! e infine margine: 0 auto, per centrare questo inline-block =)

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

    Demo – http://codepen.io/grantex/pen/InLmJ

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

    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 del 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 una lista non ordinata per creare una galleria … Ho fatto un po ‘di battute per scherzare. Sentiti libero di provarlo qui.

    [è stato impostato utilizzando il codice di esempio di robusto]
    HTML:

     
    •   

    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 sui grandi schermi. Non è buono, ma una buona soluzione sporca.

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

    Questo tutto!