Hi,

I have created a menu by "floating" elements of a list. The HTML is as follows:

<ul id="menu">
<li><a href="/">Foo</a></li>
<li><a href="/">Bar</a></li>
</ul>

The css is as follows:

#menu ul li{
list-style: none; 
float: left;
}

Now, I have come to a point where I want to center the menu on top of the page, yet the list items keep being aligned to the left endge of the containing DIV. Is there a way to make them centered?

  • You really shouldn't steal other people's designs =( Andy Ford about 7 years ago

4 answers

zac 30
2
points
This was chosen as the best answer

Hi.. in your example you are calling the id in the wrong way.. instead of menu #ul try ul#menu

The code I got to work uses absolute positioning and it works fine in IE 6

<style type="text/css">

ul#menu{
        text-indent: 0px;margin: 0px; padding: 0px;list-style: none;  /*reset everything*/
        position:absolute; width: 100px; left: 50%; 
        border: 1px red solid;
        text-align: center;
        }
</style>

<ul id="menu">
<li><a href="/">Foo</a></li>
<li><a href="/">Bar</a></li>
</ul>
Answered about 7 years ago by zac
4
points

There's a couple of options.

  1. Centre the list items: Use display: inline-block instead of float: left; on your list items (you'll lose compatibility with Firefox 2), and set text-align: center in the ul.
  2. Centre the list itself: Set a width on the ul element, and it's left and right margin to auto.
Answered about 7 years ago by Olly Hodgson
  • 1. I would like to keep compatibility to FF 2 and IE 6 2. This makes the list elements "stick" to the side of the UL. Same problem as before :'( Alexey Kulikov about 7 years ago
  • If you follow the steps in this answer, it should work. Also, you can retain FF2 compatibility by setting 'display: -moz-inline-block;' as well as 'display: inline-block;' Andy Ford about 7 years ago
2
points

wow, site is cool, but looks just like http://www.campaignmonitor.com

Answered about 7 years ago by Cuong Dang
  • +1 for the harsh truth Andy Ford about 7 years ago
0
points

there are several ways you can do this.

As mentioned above set the float on the ul to none and the left/right margins to auto. (this works in everything but IE6+)

to make it work in IE6+ set the text-align of the parent div to text-align:center and set float:none to the ul. Keep in mind the parent element has to be the entire width of the window. If there is no parent element, set text-align:center on the body. (be sure to reset text-align:left on all your parent elements if you put text-align:center on the body or everything will be centered.

Answered about 7 years ago by Mark Malek