CSS won't center.
April 6, 2009 1:03 PM   Subscribe

Trying to center a drop-down CSS menu.

Alright, time for another web-related question.

I've made a CSS drop down menu for my site, and I'm trying to center it on the page—while keeping all the text in the menu left-aligned. I can't seem to get this to work, and all the internet how-to guides I've found try to center my text.

HTML, CSS.

Thanks so much.
posted by reductiondesign to Computers & Internet (9 answers total) 1 user marked this as a favorite
 
Best answer: Can you set a width to the top-level ul?

ul {
font-family: Helvetica, Verdana;
font-size: 16px;
margin: 0 auto;
padding: 0;
list-style: none;
width: 400px;
}

works for me.
posted by gramcracker at 1:10 PM on April 6, 2009


ul#menu {
margin: 0 auto;
}

should do the trick.
posted by yerfatma at 1:10 PM on April 6, 2009


Response by poster: gramcracker, I'd want the menu to be centered no matter what size the browser is.

yerfatma, I wish I could say that worked, but I'm not seeing any change. (Safari 3.2 and Firefox on OS 10.5.)
posted by reductiondesign at 1:21 PM on April 6, 2009


You could set a percentage width then. There are also workarounds for horizontal centering without width set, Google should work.
posted by gramcracker at 1:28 PM on April 6, 2009


Best answer: gramcracker's first method works regardless of the window size (I checked in Safari 3.2 and Firefox on OS 10.5, just to be sure.) The only way you'd run into trouble with it is if you need to support different numbers of elements inside the ul (the width attribute must be wider than the menu itself or the list elements will wrap.)

Yerfatma didn't look at your css before posting.
posted by ook at 1:37 PM on April 6, 2009


Add a width to the UL's container (it doesn't think it has a width, because the LIs inside it are floated).

body {
width: 100%;
}

ul {
margin: 0 auto;
}
posted by Civil_Disobedient at 1:51 PM on April 6, 2009


Response by poster: Alright, setting the top level ul width to 400px centered everything, but it's making my sub-menus really wide (400 pixels, I'd guess).
posted by reductiondesign at 2:04 PM on April 6, 2009


Best answer: There are four things you need to do:

1. Set a width on ul#menu
It doesn't matter what it is, as long as it's less than the width of the browser viewport -- setting a width on the element is required for the automatic margins to work.

2. Set the ul#menu to margin:0 auto;
This makes the left and right margins of the element automatic, resulting in centering. You should only set it on the ul with the #menu id, though, otherwise each of the sub-elements will inherit the same width.

3. Set the body element to text-align:center;
This is required to get IE to recognize the technique above.

4. Set ul to text-align:left;
This will undo the text-alignment set on the body element.
posted by camcgee at 2:06 PM on April 6, 2009


Response by poster: Added width:inherit; to everything else and now it's perfect. Thanks again everyone!
posted by reductiondesign at 2:11 PM on April 6, 2009


« Older What is your favorite sex toy and why?   |   Should I worry about this bite? Newer »
This thread is closed to new comments.