0

I have this ul menu:

<ul id="superfish-1">
  <li class="active-trail"><a href="#" class="sf-depth-1  active">Inicio</a></li>
  <li class="trail"><a href="#" class="sf-depth-1">Quienes somos</a></li>
  <li class="trail"><a href="#" class="sf-depth-1">Contacto</a></li>

</ul>

and I need to align it horizontally.

I saw this question but positioning the ul as postion:relative; and setting left:50% didn't make it.

I also found this question but in my case I can't set the width manually because the menu load its content dinamically, then the width changes all the time.

This is what I need: capture

Community
  • 1
  • 1
chefnelone
  • 189
  • 1
  • 4
  • 16

2 Answers2

3

Write like this:

    #superfish-1{
     text-align:center;
    }
    li{
     display:inline-block;
     *display:inline;/*For IE7*/
     *zoom:1;/*For IE7*/
    }

Check this http://jsfiddle.net/SdkKd/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • I can't set width with a fixed value. The width of the menu change when the site is loaded in other languages, then this won't work. – chefnelone Jun 14 '12 at 12:29
  • i see, it works in your link, but not in my site. I'll check the inherited styles it might have. – chefnelone Jun 14 '12 at 12:35
  • This way should work. However, it's the li elements that center, not the ul, if that's your problem. – Fewfre Jun 14 '12 at 12:38
  • I spotted the problem, my li element has the style `float:left;` which is why your code doesn't work. – chefnelone Jun 14 '12 at 12:59
0

Add margin:0 auto; to css of ul.

Check this fiddle: http://jsfiddle.net/dURBJ/1/

SVS
  • 4,245
  • 1
  • 23
  • 28