如何让这个菜单居中？答案

【问题标题】：How do I center this menu?如何让这个菜单居中？
【发布时间】：2011-08-10 08:21:34
【问题描述】：

如何将this CSS menu 居中？当我缩小时，它会停留在左侧。

如果可能，请回复完整的新代码。

    <!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;
    }

【问题讨论】：

对我来说它从左边开始，所以它保持在同一个位置。如果您希望它绝对居中，您可以设置 UL 和边距的宽度：0 自动。或者，您可以将 div 设置为 1px x 1px，绝对定位距左侧或右侧 50%，然后将 UL 放在 div 中，相对定位和左侧 - UL 宽度的一半。

标签： css menu centering

【解决方案1】：

#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;
}

（我倾向于避免使用 inline-block，因为它在许多浏览器中不被正确支持。inline 在这里可以正常工作。） - 我错了，它必须是 inline-block，我编辑了上面的代码以反映这一点使用跨浏览器 hack 以确保它可以在所有主流浏览器中运行。

【讨论】：

我尝试按照您的建议更改代码，但现在菜单更靠左！ goo.gl/tKtyE
我的错，它确实需要内联块...我用跨浏览器黑客编辑了我的答案，所以内联块应该在所有浏览器中正确显示

【解决方案2】：

如果你可以在#tabs里面的ul上设置一个固定的宽度，这个就比较简单了：

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

如果不能（或不想）设置固定宽度，可以使用display: inline-block：

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

如果您关心 IE7，请使用：

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

更多详情请见this answer。

【讨论】：

【解决方案3】：

为#tabs a 删除float: left 和padding，

为#tabs li 添加display: inline-block 和1px 实心#2763A5

最后，#tabs ul 得到 text-align: center。

希望这是有道理的

【讨论】：

这也有效，所以+1。虽然在整个ul 上做同样的把戏更容易，就像我的回答一样。

【解决方案4】：

将标签更改为：

#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*/
}

【讨论】：