24Oct 2011 5 Comments */?>

Centrar menu con ancho variable solo con CSS

Categorías: Tutoriales - Tags: , ,

Cuando tenemos un menu y no sabemos el width del mismo se complica un poco a la hora de centrarlo en nuestras webs. A veces no sabemos el width porque ni siquiera controlamos los elementos del menu , sino que estos son añadidos a gusto y piacere del usuario como en el caso de usar WordPress Nav menus.

Hay varias soluciones para este problema pero la que más me gusta a mí es la siguiente:

1
2
3
4
5
6
7
8
<div id="menu_wrapper">
   <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#" class="active">Link 2</a></li>
      <li><a href="#">Link 3 un poco más largo que Link 2</a></li>
      <li><a href="#">Link 4</a></li>
   </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#menu_wrapper {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#menu_wrapper ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#menu_wrapper ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#menu_wrapper ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#menu_wrapper ul li a:hover {
   background:#369;
   color:#fff;
}
#menu_wrapper ul li a.active,
#menu_wrapper ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

Pueden ver un ejemplo aquí .

Aunque dicho método es para un menu también se puede aplicar a otros elementos.
Lo bueno es que no necesitamos javascript, hacks CSS ni nada raro. todo funciona perfectamente , es xhtml válido y funciona con todos los navegadores.

Espero que les haya servido. Saludos!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • gracias esto era justo lo que andaba buscando y me funciono muy bien.

  • Machofo

    Como me costó encontrar algo que hiciera esto!! Excelente aporte!!

  • Henry

    Buen trabajo, enhorabuena, 😉
     

  • Manulagos

    necesito mover mi menú a la izquierda… alguien sabe alguna solucion … muchas gracias

  • Ronaldo

    lo malo es que no se pueden hacer mas anchos los botones… pero esta excelente 10 puntos por eso!!!