¿Cómo centro el menú horizontal ?

Necesito alinear el centro de un menú horizontal.
He intentado varias soluciones, incluida la combinación de inline-block / block / center-align etc., pero no lo he logrado.

Aquí está mi código:

  

ACTUALIZAR

Sé cómo centrar la alineación de la ul dentro del div . Eso se puede lograr usando la sugerencia de Sarfraz. Pero los elementos de la lista todavía flotan a la izquierda dentro de la ul .

¿Necesito Javascript para lograr esto?

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

La premisa es simple y básicamente solo involucra una envoltura flotante sin anchura que se flota hacia la izquierda y luego se desplaza fuera de la pantalla a la posición de ancho izquierdo: relativa; izquierda: -50%. A continuación, el elemento interno nested se invierte y se aplica una posición relativa de + 50%. Esto tiene el efecto de colocar el elemento muerto en el centro. El posicionamiento relativo mantiene el flujo y permite que otro contenido fluya por debajo.

Código

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

Esto funciona para mí Si no he malinterpretado su pregunta, puede intentarlo.

  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 CSS3 flexbox. Sencillo.

 ul { display: flex; justify-content: center; } ul li { padding: 0 8px; } 

Esta es la forma más simple que encontré. Usé tu html El relleno es solo para restablecer los valores predeterminados del navegador.

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

Aquí hay un buen artículo sobre cómo hacerlo de una manera sólida como una roca, sin ningún tipo de pirateo y soporte completo entre navegadores. Funciona para mi:

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

Hazlo asi :

   

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

Como muchos de ustedes, he estado luchando con esto por un tiempo. La solución finalmente tuvo que ver con el div que contiene el UL. Todas las sugerencias sobre la alteración del relleno, el ancho, etc. del UL no tuvieron ningún efecto, pero sí lo hicieron.

Todo se trata del margin:0 auto; en el div que contiene Espero que esto ayude a algunas personas, y gracias a todos los que ya sugirieron esto en combinación con otras cosas.

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

Prueba esto:

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

En general, la forma de centrar un elemento de nivel negro (como un

    ) es usar el margin:auto; propiedad.

    Para alinear texto y elementos de nivel en línea dentro de un elemento de nivel de bloque use text-align:center; . Entonces, todos juntos, algo así como …

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

    … Deberia trabajar.

    El caso marginal es Internet Explorer6 … o incluso otros IEs cuando no se utiliza un . IE6 alinea incorrectamente los elementos de nivel de bloque con text-align . Por lo tanto, si está buscando admitir IE6 (o no usar ), su solución completa es …

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

    Como nota al pie, creo que id="topmenu firstlevel" no es válido ya que un atributo id no puede contener espacios …? De hecho, la recomendación w3c define el atributo id como un tipo de “nombre” …

    Los tokens de ID y NAME deben comenzar con una letra ([A-Za-z]) y pueden ir seguidos de cualquier cantidad de letras, dígitos ([0-9]), guiones (“-“), guiones bajos (“_”) , dos puntos (“:”) y puntos (“.”).

    Utilicé la pantalla: propiedad de bloque en línea: la solución consiste en utilizar un contenedor con ancho fijo. En el interior, el bloque ul con el bloque en línea para mostrar. Usando esto, ¡el ul solo toma el ancho para el contenido real! y finalmente margen: 0 automático, para centrar este bloque en línea =)

     /*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 mucho más limpio.

    Yo uso el código jquery para esto. (Solución 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 como inline-table soluciona el problema. Usé el div principal para alinear el texto al centro. de esta manera se ve bien incluso en otros idiomas (traducción, ancho diferente)

    La solución de @Robusto fue la más simple para lo que estaba tratando de hacer, le sugiero que la use. Intentaba hacer lo mismo con las imágenes en una lista desordenada para hacer una galería … Hice un violín js para jugar con él. No dude en probarlo aquí.

    [fue configurado usando el código de muestra de 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%} 

    Es una aproximación decente en pantallas grandes. No es bueno, pero es una buena solución sucia.

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

    ¡Que todos!