How do I center this menu?

Question

How do I center this CSS menu? When I zoom out it stays to the left.

Please reply with a full new code if possible.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>10</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1>&nbsp;</h1>
<div id="tabs">
  <ul>
    <li><a href="http://www.free-css.com/"><span>CSS Templates</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Layouts</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Books</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Menus</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Tutorials</span></a></li>
    <li><a href="http://www.free-css.com/"><span>CSS Reference</span></a></li>
    <li><a rel="nofollow" target="_blank" href="http://www.exploding-boy.com/" title="explodingboy"><span>explodingboy</span></a></li>
  </ul>
</div>
</body>
</html>

    body {
    font: bold 11px/1.5em Verdana;
    }

h1 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin:0;
    padding:0;
    }

hr {
    border:none;
    border-top:1px solid #CCCCCC;
    height:1px;
    margin-bottom:25px;
    }

    #tabs {
    text-align: center
}
#tabs ul {
    display: inline-block;
    padding: 10px 0 0 0
}

#tabs {
    float:left;
    width:100%;
    font-size:93%;
    border-bottom:1px solid #2763A5;
    line-height:normal;
    }

#tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }

#tabs li {
    display:inline;
    margin:0;
    padding:0;
    }

#tabs a {
    float:left;
    background:url("tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }

#tabs a span {
    float:left;
    display:block;
    background:url("tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
    color:#FFF;
    }

#tabs a:hover {
    background-position:0% -42px;
    }

#tabs a:hover span {
    background-position:100% -42px;
    }

It starts on the left for me, so it's staying in the same position. If you want it absolutely centered you can set a width the UL and margin: 0 auto. Alternatively you can set the div to 1px by 1px absolutely positioned 50% from the left or right, then put the UL in the div, with relative positioning and left - half the width of the UL. — Robert, Apr 21 '11 at 14:05

George Reith · Accepted Answer · 2011-04-21T14:33:23.083

2

#tabs {
  border-bottom:#2763a5 1px solid;
  font-size:93%;
  line-height:normal;
  width:100%;
  text-align:center;
}

#tabs ul {
  display:inline-block;
  display: -moz-inline-stack; // Firefox 2 doesn't understand inline-block but this acts the same
  zoom: 1; // Make IE7 display inline-block correctly
  *display: inline; // Only targets IE6 & IE7
  list-style-image:none;
  list-style-type:none;
  margin:0;
  padding-bottom:0;
  padding-left:50px;
  padding-right:10px;
  padding-top:10px;
}

(I tend to avoid using inline-block because it isn't supported correctly in many browsers. inline will work fine here.) - I was wrong here it must be inline-block, I edited the code above to reflect this with cross browser hacks to make sure it runs in all major browsers.

edited Apr 21 '11 at 14:33

answered Apr 21 '11 at 14:13

George Reith

13,132
18
79
148

I tried to change the code as per your suggestion but now the menu sticks even more to the left! http://goo.gl/tKtyE – Raz Apr 21 '11 at 14:24
My bad it does need to be inline- block... I edited my answer with a cross browser hack so the inline block should display correctly in all browsers – George Reith Apr 21 '11 at 14:32

gutierrezalex · Answer 2 · 2011-04-21T14:09:51.623

1

Remove float: left and padding for #tabs a,

Add display: inline-block and 1px solid #2763A5 for #tabs li

Last, #tabs ul gets text-align: center.

Hope this makes sense

edited Apr 21 '11 at 14:09

answered Apr 21 '11 at 14:08

gutierrezalex

828
4
10

This does also work, so +1. Though it's easier to do the same trick on the entire `ul`, like in my answer. – thirtydot Apr 21 '11 at 14:10

score 1 · Answer 3 · edited May 23 '17 at 11:43

If you can set a fixed width on the ul inside #tabs, this is relatively easy:

#tabs ul {
    width: 730px;
    margin: 0 auto
}

If you can't (or don't want to) set a fixed width, you can use display: inline-block:

#tabs {
    text-align: center
}
#tabs ul {
    display: inline-block;
    padding: 10px 0 0 0
}

If you care about IE7, use:

#tabs ul {
    display: inline-block;
    *display: inline;
    zoom: 1;
    padding: 10px 0 0 0
}

See this answer for more details.

score 0 · Answer 4 · answered Apr 21 '11 at 14:33

0

change tabs to this:

#tabs {
   float: left;
   width: 50%;
   font-size: 93%;
   border-bottom: 1px solid #2763A5;
   line-height: normal;
   margin: 0 auto;
}
/*and*/

#tabs a span {
   /* remove float*/
}

answered Apr 21 '11 at 14:33

Naftali

144,921
39
244
303

How do I center this menu?

4 Answers4