第二列的中心按钮具有灵活的宽度？答案

【问题标题】：Center buttons in second column with flexible width?第二列的中心按钮具有灵活的宽度？
【发布时间】：2012-10-15 06:35:20
【问题描述】：

如何使#top-menu 中的红色和黄色蓝色按钮居中？

http://jsfiddle.net/qhoc/qKXD2/

我的问题是我希望#top-menu 保持在右侧，而不是与整个屏幕宽度重叠。现在#top-menu 中的任何内容都位于屏幕本身的中心。

谢谢。

【问题讨论】：

您需要在#header...中将徽标（黄色）和#top-menu 按钮（红色和蓝色）居中？

标签： html css layout stylesheet

【解决方案1】：

像这样改变#top-menu .center 和#logo 样式我认为这就是你想要的

#logo {
  background-color: yellow;
  display: block;
  float: left;
  width: 180px;
  height: 45px;
  position:absolute;
 }


#top-menu .center {
  width: 235px;
  margin auto;
}

DEMO

【讨论】：

嗯，出于其他设计原因（例如，按钮超过 2 个等），我的宽度打算为 235px。
用超过 2 个按钮等检查我的新答案。也许有帮助

【解决方案2】：

从按钮样式中删除 float:left 并添加 display:inline-block. 将overflow:auto添加到#top-menu .center

说明

Float:left：使您的 div 与父 div 完全左对齐。

disply:block: 使 div 占据整个水平空间。

Overflow:auto: 使父div根据ot里面的内容进行扩展。

由于您需要将两个 div 并排放置，请提供inline-block。 inline-block 使 div 根据 div 内的内容进行扩展。

LIVE DEMO

【讨论】：

只需添加autoflow:auto 即可工作，无需删除float:left 或添加inline-block。你能解释一下这里发生了什么以及它为什么有效吗？我在溢出时读到了这个w3schools.com/cssref/pr_pos_overflow.asp，在这种情况下它没有意义。
我认为这里只有overflow:auto 很重要，因为您可以看到我的修改jsfiddle.net/qhoc/qKXD2/7，因为我添加了它而没有删除'float:left'。我猜我以前的 css 不起作用，因为 #top-menu .center 没有宽度值（在元素列表中单击 .center 时基于 Firebug）。当我添加overflow:auto 时，它有width。尽管#top-menu 仍然具有屏幕的全宽（上面链接中的黑色边框），但这仍然有效。为什么css会有这种行为？
但我不觉得蓝色和红色按钮与顶部菜单 div 居中对齐。您可以扩展结果部分并查看效果。并在我的演示 jsfiddle.net/qKXD2/5 中检查相同的内容
哦，我明白了。您的解决方案将所有按钮设置在绿色边框内（.center）：jsfiddle.net/qhoc/qKXD2/10，而我的仍然将按钮置于左对齐（尽管 .center 现在实际上居中）：jsfiddle.net/qhoc/qKXD2/11。但是关于margin:auto 机制的问题仍然存在：#left-menu（带有黑色边框）100% 跨越屏幕，所以即使有上面的修复，为什么.center 不会以宽度为中心屏幕，只是基于逻辑。因为最初，我正在考虑改为修复 #left-menu 宽度。

【解决方案3】：

这就是解决方案。删除徽标中左侧的浮动并放置margin：0 auto；请看下面的链接

http://jsfiddle.net/qKXD2/6/

非常感谢

【讨论】：

谢谢，但我宁愿将蓝色和红色按钮保持在同一个水平栏中...

【解决方案4】：

检查 demo 以获取标题的中心徽标和顶部菜单。

【讨论】：