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

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

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.

Please note the following.

The 'centeredmenu' div (blue box) is floated to the left but we give it a width of 100% so it remains stretched across the whole page.

The ul element (pink box) is inside the 'centeredmenu' div and is floated to the left. This means that the ul will shrink to the width of its content, this just so happens to be the width of all the tabs.

All li elements (green boxes) are inside the ul and each is floated to the left. This causes them to shrink around the link inside themselves and they all line up in a horizontal row.

Inside each link (orange box) is the text that appears on the tab; Tab 1, Tab 2, etc.

Shifting the position of the unordered list

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

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.

Because the ul element sits partly off the page your browser window will scroll sideways unless you include an overflow:hidden; rule on the 'centeredmenu' div. This will chop off the overhanging div. If you don't want to use the overflow:hidden; rule then see my centered drop-down menu article that explains how to remove it.

rule on the 'centeredmenu' div. This will chop off the overhanging div. If you don't want to use the rule then see my centered drop-down menu article that explains how to remove it. Because the ul element is not aligned with the tabs you cannot add any visible styling to it. Leave the ul element without a background colour and with no border so it will be completely invisible. Do all of your tab styling on the li and a elements only.

If you need to style the first or last tab differently to the others, add a class to the first and last li element so they can be targeted individually.

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

Safari

Chrome

Mac

Safari

Firefox 2+

Opera

Windows

Firefox 2+

Safari

Opera

Google Chrome

Internet Explorer 5.5 and above.

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.