Cannot center menu

Hi there, hoping someone can help me with this one. I am building a site for a friend, and would like to center the top menu. I simply cannot figure out how to do it!
Here is the site address:

I would love it if someone could give me some pointers.


As the menu is just text then the easiest way is to set the list and anchor to display:inline and use text-align:center on the ul.


#tr-top-menu ul {
    margin:0 auto;
[B]    text-align:center;[/B]
#tr-top-menu ul li {
  [B] /* width:auto!important;*/
#tr-top-menu ul li a {

 [B]   display:inline;[/B]
    padding:0 10px;
    text-transform: uppercase;

I know this is completely unrelated to youry currnet problem, but you should consider avoiding pixel fonts because IE can’t do text resizes and they are a poor measurement choice for fonts :slight_smile:

Dear Paul,

You sir, are a treasure and an inspiration. Thankyou for your help! With a bit of trial and erroe I finally figured out what you were trying to tell me, found the correct css and fixed my problem. Thankyou so much.


RyanReece, what do you mean by pixel fonts? Sorry for my ignorance, I have only been building websites for 9 months, self taught, so my knowledge lacks greatly.
Do you mean that I should consider replacing my text menu with images instead?

Ryan was referring to things like this "“font-size:13px”.

When you use px for your font-sizes it means IE users cannot enlarge the text size from the browser controls (although IE7 and 8 can zoom but IE6 can do neither).

It’s less of an issue these days than it was but it is still recommended to use em/% instead so that IE users can resize their text if they want.


This bases the size of the font on the size of the parent and maintains a relationship between all the fonts on the page and if the user resizes the text the whole page scales accordingly.