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;
}

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%，但是要小得多。