Bootstrap 3 text-align: центр не работает

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%, но это было намного меньше.