Question

因此，如果我只有一个元素，在我的情况下是一个按钮，我只需将.center-block类添加到该元素，它就会居中。

<div class="form-group">
    <div class="col-sm-4 col-sm-offset-4">
        <button type="submit" class="btn btn-primary center-block">Element 1</button>
    </div>
</div>

但如果我有两个元素怎么办？我试图将它们包装在一个div中并添加一个.center-div类，如下所示：

HTML：

<div class="form-group">
    <div class="col-sm-4 col-sm-offset-4">
        <div class="center-div">
            <button type="submit" class="btn btn-primary">Element 1</button>
            <button type="submit" class="btn btn-primary">Element 2</button>
        </div>
    </div>
</div>

CSS：

.center-div {
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
}

.center-div与.center-block几乎相同，只是我使用了display: inline-block;而不是display: block;，因此它符合内容大小。

可悲的是，它不起作用。除非我将其更改为display: block;并将其固定为200px的固定宽度。

我在这里缺少什么？

Answer 1

如果元素的宽度是固定的，则左右边距设置为自动仅适用。由于您的center-div现在是内联块，因此您的容器上需要text-align: center属性。

<div style="text-align: center">
    <div class="center-div">
        <!-- inner elements -->
    </div>
</div>

为了方便起见，我在这个例子中使用了一个样式属性

Answer 2

看看这是否有帮助：

.center-div {
width: 50%;
border: 1px solid black;
display: inline-block;
margin:0 auto;
text-align: center;
}
body{
text-align: center;
}

在Bootstrap列中居中2个元素

2 个答案: