水平居中的块元素组答案

【问题标题】：Horizontally centering group of block elements水平居中的块元素组
【发布时间】：2013-11-29 12:22:06
【问题描述】：

我希望这些按钮居中（三个版本代表同一事物的不同可能版本）.. 所以所有的 css 和 html 都必须相同.. 只是项目的数量必须改变。

我希望它们有一个固定的宽度，所以我不能使用内联元素（而只是将它的文本居中对齐）。

我还需要 html 标记足够简单，以便还可以使用不同的样式表灵活地垂直堆叠按钮

关于如何实现这一点的任何想法？我没有看到任何方法。

现在有 1-3 个元素。理想情况下，它可能涵盖任何数字，但这不是必需的。而且我希望它可以在 IE6 中工作..

【问题讨论】：

【解决方案1】：

我为你编辑了：http://jsfiddle.net/vrcQp/6/

【讨论】：

这就是我想要的外观。我避免使用 inline-block 因为我知道它在 IE6 中有点奇怪.. 不过我现在没有它来测试
有一些方法可以修复 IE6：homepage.ntlworld.com/spartanicus/… 不过，由于 IE6 已经过时，它变得越来越不重要。我理解您对跨浏览器支持的需求

【解决方案2】：

这里只需将float:left; 替换为display:inline-block;

但是为什么你的按钮是<div>？在我看来 <button> 或 <input /> 默认情况下是内联块。为了兼容性，我让你检查一下：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

【讨论】：

【解决方案3】：

如果您不介意将按钮的宽度从百分比更改为 px，那么您可以使用this article 中介绍的技术。它基本上使用 position: relative;与左：50%；右：50%；在菜单中水平居中项目。

【讨论】：

【解决方案4】：

http://jsfiddle.net/vrcQp/8/

这就是你想要做的吗？

【讨论】：