Beautiful Horizontally Centred Menus

Horizontally Centered Menus with no CSS hacks

A lot of people want centred menus on their website but for the CSS novice this task seems impossible.

If you do a search online you will find a few centring methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers.

In this post I'm going to show you my secret method of achieving centred tabs that do not use any CSS hacks and will work in all the common web browsers all the way back to IE 5.5!

It's also compatible with my perfect liquid layouts.

Let's start with a basic example then I'll explain how it works.

Centered Menu Basic Example

Below you should see four horizontally centred tabs in this column of text, the second tab is set as active. Try resizing your browser window and change the size of the page text to see how the menus always remain centred and clickable.

See some more advanced centered CSS menu examples

Centered Menu HTML

The HTML used for centered menus is semantically structured and very basic. The structure is simply a list of links in a single div.

<div id="centeredmenu">
   <ul>
      <li><a href="#">Tab one</a></li>
      <li><a href="#" class="active">Tab two</a></li>
      <li><a href="#">Tab three</a></li>
      <li><a href="#">Tab four</a></li>
   </ul>
</div>

Centered Menu CSS

Below is the CSS used to center the tabs across the page. See below for an explanation of how this works.

#centeredmenu {
   float:left;
   width:100%;
   background:#fff;
   border-bottom:4px solid #000;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#ddd;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}
#centeredmenu ul li a:hover {
   background:#369;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}

How the centering method works

The trick to my centring method is how the floated elements are relatively positioned within one another. To explain this properly let me first describe how an element can change its dimensions when floated.

Non-floated div

A non-floated div

Here is a div (a block level element) that is not floated. Notice how it stretches to 100% of the width of its containing element, in this case, that's the whole page.

Left floated div

A left-floated div

If we now float the div to the left it will automatically shrink to match the width of the content inside itself. It is now only as wide as the text "Div". This shrinking is the key to the centring process, it helps us move our menu the right amount into the centre.

Standard left aligned menu

Let's use a traditional left aligned menu and move the tabs into the centre step by step. I have coloured each element in a different colour so it is easy to see how they are all nested together.

Nested element structure of left aligned tabs

Please note the following.

Shifting the position of the unordered list

Nested element structure of left aligned tabs, ul shifted to the right

Next we shift the ul element to the right by 50% by using position:relative;. When moving an element to the side by a percentage in this way it is important to note that it will move a percentage of its containing element's width not it's own width. So in this instance, the ul element will move to the right by 50% of the 'centeredmenu' div width - this is half of the browser window. The end result is our menus start from the middle of the screen and partly run off the page to the right, but don't worry, in one more step we will have them in the centre.

Shifting the position of all line items

Nested element structure of the completed centered tabs

The last step is to shift all of the li elements back to the left by 50%. This is 50% of the width of the ul element (their containing element) and it will put the tabs exactly in the centre of the window.

Some important notes

This method of centering menus is rock solid but there are a few things you must be aware of.

So, here are the main features of the pure CSS centered menus.

No CSS hacks

The CSS used for these centered menus is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses clever relative positioning.

Valid XHTML strict markup

The HTML in these centered menus validates as XHTML 1.0 strict.

Resizable text compatible

These centred tabs are fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility.

No JavaScript required

JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.

Full cross-browser compatible

The pure CSS centred menus have been tested on the following browsers.

iPhone & iPod Touch

Mac

Windows

Don't forget to view the more advanced centered tab examples to see what can be done.

If you want to add drop-down menus then I have you covered too.

Published: 26 Jul 2008