Центрирование кнопки по вертикали в ячейке таблицы с использованием 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. Я пробовал несколько трюков с центрированием таблицы, о которых я знаю, но никто, похоже, не работает должным образом. Есть идеи? Спасибо заранее.

UPDATE: Да, я пробовал vertical-align:middle;, и это работает, если он встроен, но не в том случае, если он имеет класс td. Обновлен JSFiddle, чтобы отразить это.

Окончательное обновление: Я идиот и не проверяю, перезаписывается ли оно bootstrap.css

Ответ 1

ДЛЯ BOOTSTRAP 3.X:

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

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

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

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

Затем добавьте класс в td s:

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

Обновите скрипку

Кроме того, вы не можете ссылаться на класс td, используя .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.

Ответ 2

Небольшое обновление для 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>

Ответ 3

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

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

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

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

Ответ 4

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

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

и это в моем TemplateField

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

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

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

Ответ 5

Добавьте 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>

Ответ 6

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

table .btn{
  vertical-align: top;
}