Центрирование кнопки по вертикали в ячейке таблицы с помощью Twitter Bootstrap

Я использую Twitter Bootstrap и пытаюсь центрировать кнопку в ячейке таблицы. Мне нужно только вертикально по центру.

<table class="table table-bordered table-condensed">
  <tbody>
    <tr>
      <td><a href="#" class="btn btn-primary"><i class="icon-check icon-white"></i></a></td>
      <td><a href="#">Todo Item One</a><br /><span class="label label-success">One thing</span></td>
    </tr>
  </tbody>
</table>

Пожалуйста, посмотрите мой JSFiddle, чтобы узнать о проблеме. Я пробовал несколько известных мне приемов центрирования стола, но ни один из них не работает должным образом. Любые идеи? Заранее спасибо.

ОБНОВЛЕНИЕ: Да, я пробовал vertical-align:middle;, и это работает, если оно встроено, но не в классе, у которого tdесть. Обновлен JSFiddle, чтобы отразить это.

Последнее обновление: я идиот, и не проверял, перезаписывается ли он bootstrap.css

ДЛЯ BOOTSTRAP 3.X:

Bootstrap теперь имеет следующий стиль для ячеек таблицы:

.table tbody > tr > td{
    vertical-align: top;
}

Можно добавить свой собственный класс, добавив больше специфичности предыдущему селектору:

.table tbody > tr > td.vert-aligned {
    vertical-align: middle;
}

А затем добавьте класс в свой tds:

<tr>
    <td class="vert-aligned"></td>
    ...
</tr>

ДЛЯ BOOTSTRAP 2.X

Это невозможно сделать с помощью Bootstrap.

При использовании в ячейках таблицы vertical-align делает то, чего от него ожидает большинство людей, а именно имитирует (старый, устаревший) атрибут valign. В современном браузере, соответствующем стандартам, следующие три фрагмента кода делают то же самое:

<td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
<td style="vertical-align:middle"> ... </td>
<div style="display:table-cell; vertical-align:middle"> ... </div>

Проверьте, что ваша скрипка обновлена

В дальнейшем

• vertical-align: middle с Bootstrap 2
• Что такое вертикальное выравнивание
• Вертикальное выравнивание элементов в div

Кроме того, вы не можете ссылаться на tdкласс using, .vertпотому что в Bootstrap уже есть этот класс:

.table td {
   padding: 8px;
   line-height: 20px;
   text-align: left;
   vertical-align: top; // The problem!
   border-top: 1px solid #dddddd;
}

И перегружает vertical-align: middleкласс '.vert', поэтому вы должны определить этот класс как td.vert.

Небольшое обновление для Bootstrap 3.

Bootstrap теперь имеет следующий стиль для ячеек таблицы:

.table tbody>tr>td
{
    vertical-align: top;
}

Можно добавить свой собственный класс с тем же селектором:

.table tbody>tr>td.vert-align
{
    vertical-align: middle;
}

А затем добавьте его в свои tds

<td class="vert-align"></td>

добавьте это в свой css

.table-vcenter td {
   vertical-align: middle!important;
}

затем добавьте к классу в свою таблицу:

        <table class="table table-hover table-striped table-vcenter">

Чтобы исправить это, я разместил этот класс на веб-странице

<style>                        
    td.vcenter {
        vertical-align: middle !important;
        text-align: center !important;
    }
</style>

и это в моем TemplateField

<asp:TemplateField ItemStyle-CssClass="vcenter">

поскольку класс CSS указывает непосредственно на элемент td (tabledata) и имеет в конце каждого параметра статус! important. Это переопределит настройки класса CSS bootraps.

Надеюсь, это поможет

Добавить vertical-align: middle;к tdэлементу, содержащему кнопку

<td style="vertical-align:middle;">  <--add this to center vertically
  <a href="#" class="btn btn-primary">
    <i class="icon-check icon-white"></i>
  </a>
</td>

Так почему же по умолчанию td установлено на vertical-align: top ;? Я правда еще этого не знаю. Я бы не осмелился прикоснуться к нему. Вместо этого добавьте это в свою таблицу стилей. Изменяет кнопки в таблицах.

table .btn{
  vertical-align: top;
}