Css: Horizontal Ul: Getting It Centered

I'm trying to make a horizontal menu/list. It has a mix of independent buttons and buttons that are wrapped in their own individual forms. With much hacking I got all of the butt

Solution 1:

According to your CSS:

#horizontal_li_menu_container ul and horizontal_li_menu_container_ul are selecting the same element. I'm not sure if you realize this.

Also, when using floats, you need to clear them.

Solution 2:

To center a block element horizontally within a page, or another element

Use

#element_id{margin: 0 auto;}
 

That will center the element around its container.

So, to center the list horizontally on the page

apply the above style to the ul, and not to the li. BTW, unless the div with id horizontal_li_menu_container has additional content, it is redundant; the ul will work perfectly without it. If that doesn't work, check the following:

1. Find the sum of the widths, paddings, and margins of all the lis in that ul
2. Make sure the sum equals the width of the ul
3. Make sure the container div has no specified width, or it has already been centered on the page

If all those are true, the above style will work. Hope this helps.