Matthew James Taylor
You are here: Home > Blog > Beautiful Horizontally Centered Menus/Tabs. 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. Let's start with a basic example then I'll explain how it works.
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
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>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;
}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.
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.
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.
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.
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.
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.
This method of centering menus is rock solid but there are a few things you must be aware of.
overflow:hidden; rule on the 'centeredmenu' div. This will chop off the overhanging div.So, here are the main features of the pure CSS centered menus.
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.
The HTML in these centered menus validates as XHTML 1.0 strict.
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.
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.
The pure CSS centered menus has been tested on the following browsers.
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!
© Copyright 1993 - 2008 Matthew James Taylor | About & Contact | RSS feed