Centrando un menu horizontal tipo UL

Menu Horizontal Centrado

Si tienes un menú horizontal, seguramente lo tengas alineado a la izquierda de la pagina, este era mi caso en uno de mis proyectos, pero necesitaba tenerlo “dinamicamente” centrado sin el uso de tamaños predeterminados porque sinceramente, es probable que el menú varíe en cantidad y hubiera tenido que volver a rediseñarlo, así que, hay va como lo implemente (gracias de antemano a la fuente):

Tenemos el HTML:

<div class="container">
 <ul id="menu">
  <li>
   <a href="#">Item 1</a>
  </li>
  <li>
   <a href="#">Item 2</a>
  </li>
  <li>
   <a href="#">Item 3</a>
  </li>
 </ul>
</div>

Y ahora el CSS seria:

.container {
 clear:both;
 float:left;
 overflow:hidden;
 width:100%;
}

#menu {
 float:left;
 left:50%;
 list-style-type:none;
 margin:0 auto;
 padding:0;
 position:relative;
}

#menu li {
 float:left;
 position:relative;
 right:50%;
}

 

Fuente: [Ayuda] Menu Horizontal UL a centrar. – Taringa!.

Anuncios

9 thoughts on “Centrando un menu horizontal tipo UL

  1. Pingback: Despidiendo el año 2013 | Lumilued Blog

  2. Muchas gracias, el ejemplo muy sencillo y bien explicado. Me ha servido de mucho ya que llevaba varios minutos intentando propiedades de la etiqueta html y con css utilizando div’s y no funcionaba.

    Saludos.

    Me gusta

  3. Funciona, pero tengo un problema, al ponerlo me es imposible hacer efectos dinámicos en el hover, como aumentar el padding de ese botón al pasarlo por encima. Me deja todos sesgados y tapa ese tipo de efectos. Alguna forma de mantenerlo, o de limitar el overflow sólo a los laterales? Gracias!

    Me gusta

  4. Hola, tu post de “Centrando un menu horizontal” aunque ya lleva mas de un año, me ha sido de mucha utilidad, sobre todo por la sencilles con que nos haces entender como centrar un menú UL con CSS, ¡Gracias!

    Me gusta

  5. Pingback: Despidiendo el año 2014 | Lumilued Blog

  6. Para que no tengan problemas al usar mas estilos, usen el siguiente código:

    ul { text-align: center; }
    li { display: inline-block; margin-right: -4px } //Se pone “margin-right: -4px” para quitar el margen que trae por defecto “inline-block”

    De esta forma tendrán su lista o menú centrado, espero que les ayude.

    Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s