Пытаясь выровнять по центру кнопку в td

У меня возникают проблемы с центрированием кнопки в td.

Это, вероятно, простая проблема с CSS, но приложение использует бутстрап, AngularJS, AngularJS-ui-bootstrap и ngTable. Я включил все эти компоненты в plunkr.

Я пытаюсь установить "horizontal-align: middle" на td с помощью кнопки, но это, похоже, не применяется. Кнопка все еще наклоняется к левой стороне ячейки.

Ответ 1

Вы можете использовать:

display: block;
margin: auto;

Вот ваш обновленный plunkr

Ответ 2

Как я уже сказал в своем комментарии, просто измените TD, чтобы иметь свойство align = "center".

<td align="center"></td>

После публикации этого я обнаружил, что это устарело в HTML5, поэтому лучше всего использовать "text-align: center" в TD в вашем CSS >

Ответ 3

Я обнаружил, что мне пришлось объединить следующие атрибуты для центрирования элементов управления JSF на странице:

<h:form style="display: block; text-align: center; margin: auto; width: 200px">
<!-- components here -->
</h:form>

Ответ 4

Это сработало для меня

<td style="text-align: center">

Ответ 5

Изменить кнопку вместо td? Не влияйте на стиль.

table .btn{
  vertical-align: top;
}

Ответ 6

HTML:
    <td class="table-row-radio-button"> <input type="radio"> </td>
CSS:
    .table-row-radio-button {
        text-align: center;
    }

работал на меня.

Ответ 7

У меня все работало нормально

<td align="center">
 <input type="button" style="float:none!important;display:inline;" value="click" />
</td>

Ответ 8

Если вы используете Bootstrap 4, добавьте эти классы в элемент <td> (у меня есть 2 кнопки):

<td class="text-center align-middle">
    <div class="btn-group">
        <button class="btn btn-outline-primary">+</button>
        <button class="btn btn-outline-primary">-</button>
    </div>                
</td>

text-center будет align-middle контент по горизонтали, а центр align-middle центру - по вертикали.