Centrare un ul con i galleggianti all'interno di un div

Question

Sto cercando di centrare questo nav basso su un sito di prova:

http://heroicdreams.com/kktest/

Il li ul utilizza float:left; che è quello che penso sta rendendo rimanere incollati alla la sinistra. Sto cercando di capire come farlo centrare.

Per visualizzare i collegamenti orizzontalmente, avevo bisogno di spostarli a sinistra, ma ora non riesco a centrare tutto il sistema. C'è un modo?

Answer 1

spesso utilizzando:

.divStyle { 
    text-align: center; 
} 
ul.styleName { 
    margin: 0 auto; 
    text-align: left; 
} 

farà il trucco.

L'applicazione di un margine "automatico" a sinistra ea destra dell'ul come questo causerà il centrarsi nel div ogni volta che il div ha il testo centrato. Questo è il numero di siti Web che gestiscono il div che funge da contenuto principale della propria pagina.

Answer 2

In entrambi i CSS:

margin: 0px auto; 

o

/*on the nav's parent*/ 
text-align: center; 

/*on the nav*/ 
text-align: left; 

Answer 3

Affinché margin:0 auto a lavorare, è necessario impostare una larghezza sul tuo ul e rimuovere il display:inline:

#footerLinks ul { 
    list-style:none; 
    margin:0 auto; 
    padding:0; 
    width:400px; 
} 

Answer 4

Ecco come ho risolto, ed è anche per i menu generati dinamicamente.

presuppongo che questo è il menu generato dinamicamente:

<div id="menu"> 
    <ul> 
     <li>One</li> 
     <li>Two</li> 
     <li>Three</li> 
    </ul> 
</div> 

e questo è il CSS:

.menu { 
    width:300px; 
    text-align: center; /*Set a width and text-align on the main div*/ 
} 

.menu ul{ 
    margin:0; 
    padding:0; 
    display:inline-block; 
    list-style: none; /*Set display to inline-block to the ul*/ 
} 

.menu ul li { 
    float: left; 
    margin-right: 1.3em; /*this is the usual*/ 
    padding: 0; 
} 

Ora, per l'elenco per essere centrato è necessario aggiungere un paragrafo vuoto per cancellare il galleggiante. È possibile farlo manualmente se il menu è statico o utilizzando jQuery come questo:

$(document).ready(function() { 
    $("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child'); 
}) 

e il CSS del paragrafo .clear sarà:

p.clear{ 
    clear:both; 
    margin:0; 
    padding:0; 
    height: 0; 
    width: 0; 
} 

e il gioco è fatto!

Answer 5

1. Aggiungi style="text-align: center;" al div genitore dell'ul.
2. Aggiungi style=" display:inline-table;" all'ul.

Answer 6

Hmm, penso che la regola di BACIO si applica qui:

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