ul con flotadores dentro de un div

Question

Estoy intentando centrar el NAV inferior en un sitio de prueba:

http://heroicdreams.com/kktest/

El li ul utiliza float:left; que es lo que creo que está haciendo que se quede pegada a la izquierda. Estoy tratando de encontrar la forma de enfocarlo.

Para hacer que los enlaces se muestren horizontalmente, necesito flotarlos hacia la izquierda, pero ahora no puedo centrar todo el navegador. ¿Hay alguna manera?

Answer 1

a menudo usando:

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

hará el truco.

Aplicando un margen "automático" a la izquierda y a la derecha de la ul como este hará que se centre en el div siempre que el div tenga texto centrado. Así es como muchos sitios web centran el div que sirve como el contenido principal de su página.

Answer 2

De cualquier CSS:

margin: 0px auto; 

o

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

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

Answer 3

Para que margin:0 auto para trabajar, es necesario establecer un ancho en su ul y retire la display:inline:

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

Answer 4

Así es como lo resolví, y también para los menús generados dinámicamente.

Supongamos que este es el menú generado dinámicamente:

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

y este es el 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; 
} 

Ahora, por la lista para estar centrado es necesario agregar un párrafo vacío para borrar la flotador. Puede hacerlo manualmente si el menú es estática o utilizando jQuery así:

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

y el CSS del párrafo .clear será:

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

y eso es todo!

Answer 5

1. Agregue style="text-align: center;" al padre div del ul.
2. Agregar style=" display:inline-table;" a la ul.

Answer 6

Hmm, creo que la regla de KISS se aplica aquí:

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