Horizontally Centered Menus with no CSS hacks

by Matthew James Taylor on 26 July 2008

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.

A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is 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 centered 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 centered 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 centering 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 it's 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 centering process, it helps us move our menu the right amount into the center.

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.

  • 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

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.

  • 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 dropdown 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.

The main features

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 centered 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

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 centered menus has been tested on the following browsers.

iPhone & iPod Touch

  • Safari

Mac

  • Safari
  • Firefox 2 & 3
  • Opera

Windows

  • Firefox 2 & 3
  • Safari
  • Opera
  • Google Chrome
  • Internet Explorer 5.5, 6 & 7

Don't forget to view the more advanced centered tab examples to see what can be done. Plus, feel free to contact me if you want to show off any sparkling new tabs you have designed that use this centering method, I would love to see them!


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor

Related articles