CSS：居中包含浮动元素的元素[重复]答案

【问题标题】：CSS: centering an element that contains floated elements [duplicate]CSS：居中包含浮动元素的元素[重复]
【发布时间】：2012-07-01 00:40:09
【问题描述】：

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

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

我创建了一个example on jsFiddle，其中绿色菜单必须在粉色元素内居中，而粉色元素必须适应绿色菜单的高度。

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

【问题讨论】：

css-tricks.com/…
抱歉，我看不出这条评论有什么帮助
你可以用display: inline-block代替float：jsfiddle.net/SKLZ7/6
@MyHeadHurts 我想这是有道理的。但是，如果这是 OP 想要的，那么作为答案不是更好吗？这可能不是他们想要的，但它是一个的答案:)
@My Head Hurts - 谢谢，效果很好。请张贴作为答案，以便其他人可以在不阅读 cmets 的情况下受益。 :)

标签： html css

【解决方案1】：

可以使用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/

【讨论】：

您能告诉我如何删除元素之间的间距吗？我把 font-size: 0px;在#page 中，但在 Safari 和 Opera 中仍有间距。
@DMIL 这是使用 display: inline-block 的主要缺点 - 它会将每个元素视为 inline，因此将在 html 中找到它们的位置放置单个空格（例如，如果您将两个单词单独写成一行，它们不会并排放置，而是中间有一个空格）。因此，阻止这种情况发生的唯一方法是将所有 li 元素放在 HTML 的同一行。
没关系，PHP 不介意。 :) 你帮了大忙，谢谢
@DML 动态站点总是更好 :) 我也刚刚发现这可能对将来避免空白有用：css-tricks.com/fighting-the-space-between-inline-block-elements

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我修改了你的一些东西。这是你要找的吗？绿色以粉红色为中心，悬停在绿色上方会突出显示青色块。 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;        
}

Demo

【讨论】：

谢谢，但是这个解决方案有一个问题，不是 li a 元素的整个表面都是链接，而只有字母所在的空间。