html - CSS：居中包含浮动元素的元素

Question

如何使未知宽度的元素居中，其中包含具有 display: block 但都浮动到一侧的元素？

基本上，我有一个菜单，其中包含许多具有 display: block 的项目（因为它们需要有适当的填充），但都在一行中。

我在 jsFiddle 上做了一个示例，其中绿色菜单必须位于粉色元素的中心，而粉色元素必须适应绿色菜单的高度。

编辑：对不起，错误的例子，用正确的例子更新

Answer 1

我修补了你的一些东西。这是你要找的吗？绿色以粉红色为中心，悬停在绿色上方会突出显示青色块。这些float: left行也适用于您最初拥有的相同选择器......

#page {
   background: yellow;  
   text-align: center; 
   width: 100%;
   float: left;
}
#mainmenu {
    background: pink;
    padding: 5px;
    width: 400px;
    text-align: center;
}
#mainmenu ul {
    background: green;
    display: inline-block;
}
#mainmenu li {
   display: inline-block;
   padding: 5px 10px 5px 10px;
   float: left;
}
#mainmenu a, #mainmenu a:visited {
   color: #ffffff;
   font-size: 12px;
   text-align: center;
   text-decoration: none;    
}
#mainmenu li:hover {
   background: cyan;        
}

​<a href="http://jsfiddle.net/SKLZ7/39/" rel="nofollow">演示

Answer 2

与其使用浮点数，不如使用display: inline-block.

所以#mainmenu li会变成：

#mainmenu li {
   display: inline-block;
   *display: inline;      /* add this for IE7 as it does not */
   *zoom: 1;              /* support display: inline-block */   
}

示例 JsFiddle：http: //jsfiddle.net/SKLZ7/6/

Answer 3

您正在使用浮动，因此其他元素会在它周围浮动。您必须关闭其余部分的浮动。使用clear:both属性将其关闭。

如此处所述，您可以<div style="clear:both;"></div>在列表之后添加。