Центрування кнопки вертикально в комірці таблиці за допомогою 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>

ДЛЯ ЗАСТАВКИ 2.X

Це неможливо зробити за допомогою Bootstrap.

При використанні в клітинках таблиці вертикальне вирівнювання робить те, що очікується від більшості людей, тобто імітує атрибут 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>

Перевірте свою скрипку оновленою

Далі

• вертикальне вирівнювання: посередині за допомогою Bootstrap 2
• Розуміння вирівнювання по вертикалі
• Вертикальне вирівнювання елементів у 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.

Невелике оновлення для 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) і має в кінці кожного параметра важний такт! Це буде замінено правилом завантаження параметрів класу CSS.

Сподіваюся, це допоможе

Додайте 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 за замовчуванням встановлено вертикальне вирівнювання: top ;? Я справді ще цього не знаю. Я б не наважився це торкнутися. Натомість додайте це у свою таблицю стилів. Він змінює кнопки в таблицях.

table .btn{
  vertical-align: top;
}