Question

如何居中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;
    }

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

（我倾向于避免使用内联块，因为它在许多浏览器中都没有得到正确支持。内联在这里工作正常。） - 我错了，它必须是内联块，我编辑上面的代码来反映这个使用跨浏览器黑客以确保它在所有主流浏览器中运行。

Answer 2

删除float: left的{{1}}和padding，

为#tabs a

添加display: inline-block和1px solid＃2763A5

最后，#tabs li获得#tabs ul。

希望这是有道理的

Answer 3

如果您可以在ul #tabs内设置固定宽度，这相对容易：

#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。

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

如何将此菜单置于中心位置？

4 个答案: