html - 如何使 DIV 中的按钮居中，以便四个按钮的左右空间相同？

Question

我有以下 HTML：

            <div class="clearfix">
                <div>
                    <button>a</button>
                    <button>a</button>
                    <button>a</button>
                    <button>a</button>
                </div>
            </div>

按钮出现在左侧，并在我的外部 DIV 右侧留下一个空间。我怎样才能使按钮居中，在左侧和右侧留下相等的空间？

Answer 1

如果您希望所有按钮都集中在您的中间，div其余可用空间在左右之间划分，请text-align:center在容器上使用。

------ ** ** ** ** ------

但是，如果您希望所有可用空间在元素边距之间平均分配，请使用涉及text-align:justify一些伪元素的小技巧。

我有两种划分空间的方法。

1) ** --- ** --- ** --- **

2) -- ** -- ** -- ** -- ** --    //I think this has the best visual output

你可以在这个Fiddle中看到区别和实现

Answer 2

margin: auto;只要元素还具有特定的宽度（水平）和高度（垂直），就会为您提供水平和垂直居中。

示例：http: //jsfiddle.net/vQJ3L/

更新：另一种方法是使用CSS3 的 calc使元素居中。这具有响应迅速的优点：

http://jsfiddle.net/vQJ3L/3/

Answer 3

您可以使用display: inline-block和text-align: center。

.clearfix > div{
    text-align: center;
}

button{
    display: inline-block;
}

你的意思是不是类似于这个：http: //jsfiddle.net/lee_gladding/YEptp/

Answer 4

像这样使用 CSS：

.clearfix > div {
  text-align: center;
}
.clearfix button {
  display: inline-block; // this should be the default state, so it is probably not needed
}

另一件事，你必须确保里面的 div.clearfix有一个宽度。否则没有什么可集中的。

Answer 5

请添加此 CSS：

.clearfix{
    width:500px;
    text-align:center;}

在此处参考小提琴：http: //jsfiddle.net/aasthatuteja/V6fxp/

Answer 6

根据您的 HTML：

button {
    display: inline-block;
}

div {
    text-align: center;
}

但是我鼓励你在这里添加一些类，为那种特定的风格处理这样的选择器不是一个好主意。

Answer 7

.clearfix > div {
  text-align: center;
}


 <div class="clearfix">
                    <div>
                        <button>a</button>
                        <button>a</button>
                        <button>a</button>
                        <button>a</button>
                    </div>
                </div>

希望这对您有所帮助。