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。 / p>

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

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

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

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

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

您可以在此Fiddle

中看到差异和实现

Answer 2

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

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

button{
    display: inline-block;
}

你的意思是这样的：http://jsfiddle.net/lee_gladding/YEptp/

Answer 3

与CSS一样：

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

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

Answer 4

请添加此CSS：

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

请参阅此处的小提琴：http://jsfiddle.net/aasthatuteja/V6fxp/

Answer 5

根据你的HTML：

button {
    display: inline-block;
}

div {
    text-align: center;
}

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

Answer 6

只要元素还具有特定宽度（水平）和高度（垂直），

margin: auto;将为您提供水平和垂直居中。

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

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

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

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>

希望这会对你有所帮助。

如何将按钮置于DIV内部，以便四个按钮左右相同？

7 个答案: