html - Bootstrap 3文本对齐：中心不起作用

Question

我已经阅读了多个问题，我知道它就像添加一样简单text-align: center，但这对我不起作用。

我也尝试添加text-center到我的包装器<div>中，但这也不起作用。

当前结果：（ 很难看到，但右边全是空白。我尝试添加黑色边框，style="border: 1px black;"但没有任何显示...）

HTML

<div class="row">
    <div class="btn-group btn-group-justified" id="dataTableSegmentedControl" role="group" aria-label="...">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default active">Dashboard</button>
            <button type="button" class="btn btn-default">Events</button>
        </div>
    </div>
</div>

CSS

#dataTableSegmentedControl button {
    width: 25%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 3px;
    display: inline-block;
    margin: auto;
    margin-bottom: 8px;
    margin-top: 8px;
}

标签： htmlcsstwitter-bootstrap-3

Answer 1

在遇到这个问题之前，我的议程是使用 Bootstrap 3 方法来使按钮的宽度相等btn-group-justified，但是正如我上面的问题所述，当我试图让这些按钮居中时，它对我不起作用。

我的最终结果是恢复使用 CSS 在中心正确格式化。

HTML

<div class="row" style="text-align: center;">
    <div class="btn-group" id="dataTableSegmentedControl" role="group" aria-label="...">
        <button type="button" class="btn btn-default">Dashboard</button>
        <button type="button" class="btn btn-default">Events</button>
    </div>
</div>

CSS

#dataTableSegmentedControl button {
    width: 400px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 3px;
    margin: auto;
    margin-bottom: 8px;
    margin-top: 8px;
    background-color: #f7f7f7;
}

结果

这不是我想要的结果，因为按钮的宽度是静态的400px。我试过50%了，但那要小得多。