How do I center the menu in Twentyten?

If you don’t plan on adding more menu items you can give the ul a fixed width and then set margin:0 auto;

* set the ul’s margin to margin:0 auto;

Thanks. That worked, kind of. But I question whether that is the most reliable method. Isn’t setting my width just a guessing game, since it’s going to vary depending on the size of the text in the particular operating system?

On my large monitor PC it looks fine. But when I look on my iPad the text has wrapped to the next line.

-Jesse

But I question whether that is the most reliable method. Isn’t setting my width just a guessing game

It’s basically the only method — and no it’s not perfect. But many aspects or elements of web design are at the mercy of browser preferences — so just test as much as you can, and design to cover the differences as best you can (aka “fail gracefully”).

The other way to deal with different devices is to use @media CSS — if you look at the end of the CSS file for twentyeleven, you’ll see how that works under the section called “responsive.”

Set div class wrap from that div you need, for example nav in you case. As we most use responsive design now or thinking to switch, using % is better to express the width when it is more than a mobile phone’s screen size.

Example usage :

#nav .wrap {
width: 90%;
margin: 0 auto;
}

It might mess up in mobile. In that case you have to define at the end of css file :

@media only screen and (max-device-width: 480px) {
div#nav {
width: 400px;
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}

There are lot tutorials for @media only screen part.

Thanks for the tips, everyone. I’ll fiddle around with the various approaches and see what I come up with.

-Jesse

I fiddled around and used this possibly not so elegant solution:

Added an 85px left margin on this style:

#access .menu-header ul,
div.menu ul

Then in an @media override, I changed the margin to 29px. The menu is now centered on my PC (all browsers), ss well as on the iPad and my Windows phone. Quite possible that it’s messed up on other devices, but I’m happy for the moment.

You can make yourself more happy by testing in Mozilla Firefox’s tool to check for different devices or here online :

https://mattkersley.com/responsive/

For 240 x 320 its actually not working fully. Basically multiple @media only screen and (max-device-width: xyzpx) is used to circumvent this.

Thanks, Abhishek Ghosh. That’s interesting. When I used that tool, none of the view display properly except for the 1024. But when I look on my own iPad it works just fine.

-J