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.
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.
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
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
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
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
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
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
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
posted by reductiondesign at 2:11 PM on April 6, 2009
This thread is closed to new comments.
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