How to center a tabbed horizontal CSS menu

This article shows and explains a different method for centering a horizontal aligned tabbed CSS menu without using any width at all on the menu. The menus demonstrated are using of unordered lists and background images.

Traditionally horizontally and centered aligned menus are using a fixed width in some way, like the horizontally and centered menu using fixed-width examples at the bottom of this article.

However, I got a question about how to center a horizontally CSS menu with tabs without using fixed width, and since I couldn’t find some information about it I came up with a solution I have called a Horizontally aligned menu with fluid width.  Both examples are using the “Fast rollover without preload” concept.

This horizontally and centered aligned  CSS menu is not using fixed width, no width at all is used. The tabs are also fluid, this is done by using two background images (see images below).

The HTML used in this CSS menu

  1. <div id="Menu">
  2. <ul>
  3. <li><a href=”#”><span>Link 1</span></a></li>
  4. <li><a href=”#”><span>Longer link text</span></a></li>
  5. <li><a href=”#”><span>Link 2</span></a></li>
  6. </ul>
  7. </div>

The CSS used in the menu

  1. #Menu {
  2. font-family: Arial, sans-serif;
  3. border-bottom: 10px solid #A0CEF8;
  4. }
  5. #Menu ul {
  6. text-align: center; /* We are using text-align: center on ul to horizontally align our menu to the page. If you want the menu aligned left or right just change text-align to either left or right */
  7. margin: 0 0 5px 0; /* Just some margin to align the blue border below the menu */
  8. }
  9. #Menu li {
  10. display: inline; /* Menu links are horizontally aligned using display: inline */
  11. }
  12. #Menu li a {
  13. padding: 7px 0 6px 10px; /* Display: block won’t work in this example, instead we are using padding to make the hole tab a clickable link */
  14. color: #5d5350;
  15. text-decoration: none;
  16. font-weight: bold;
  17. background: url(/examples/images/tabbed-menu-left.gif) no-repeat left top; /* Rollover effect using “Fast rollovers without preload” concept for the left part of the tab */
  18. }
  19. #Menu li a:hover {
  20. background: url(/examples/images/tabbed-menu-left.gif) no-repeat left bottom;
  21. }
  22. #Menu li a span {
  23. padding: 7px 10px 6px 0;
  24. background: url(/examples/images/tabbed-menu-right.gif) no-repeat right top; /* Rollover effect using “Fast rollovers without preload” concept for the right part of the tab */
  25. }
  26. #Menu li a:hover span {
  27. background: url(/examples/images/tabbed-menu-right.gif) no-repeat right bottom;
  28. }

So far so good except that Internet Explorer (including version 7) must use a hack. To do that we use a separate CSS and conditional statements as shown below. Can you fix this without a hack, please take contact.

  1. <!--[if IE]>
  2. <style type=”text/css”>
  3. /* Unfortunately, for some reason both IE6 and IE7 needs to be hacked. */
  4. .Menu1 li a {
  5. padding: 0 0 0 10px;
  6. }
  7. </style>
  8. <![endif]–>

Below is our horizontally and centered aligned CSS menu with fluid width demonstrated.

If you want your menu left or right-aligned instead, just change text-align to either left or right in #Menu ul as shown in the examples below.

This method is perhaps the most common method for centering a menu (or another element) and is mainly added to this article as a comparison to the other menu example. Therefore the CSS isn’t presented within the article, but you find it in the source code as Menu 4.

Fixed width is used on both ul and tabs in this example. A fixed tab width may look good, but the drawback is that you can’t have a very long text on the tab as the example below shows.

The HTML used in this CSS menu

The HTML in this menu is identical to the fluid version, except that you can drop the use of <span>.

Below is our horizontally and centered aligned CSS menu using fixed-width demonstrated.

Some final words about these menus

If you look in the source code of this article you will notice some differences between the explanations and the code used. This is because the menus are presented within this article.