水平居中的块元素组

时间:2011-07-26 06:16:40

标签: css fluid-layout

http://jsfiddle.net/vrcQp/

我希望这些按钮居中(三个版本代表同一件事的不同可能版本)..所以css和html必须对所有人都相同..只需要更改项目数。

我希望它们有一个设定的宽度,所以我不能使用内联元素(只是文本对齐中心)。

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

有关如何实现这一目标的任何想法?我没有看到任何方法。

现在有1-3个元素..理想情况下它可以覆盖任何数字,但这不是必需的。我希望它能在IE6中运行..

4 个答案:

答案 0 :(得分:3)

我为您编辑:http://jsfiddle.net/vrcQp/6/

答案 1 :(得分:1)

此处只需将float:left;替换为display:inline-block;

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

答案 2 :(得分:1)

如果您不介意将按钮的宽度从百分比更改为px,则可以使用this article中说明的技巧。它主要使用position:relative;左边:50%;和右:50%;在菜单中水平居中项目。

jsFiddle example

答案 3 :(得分:0)

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

这是你想要做的吗?