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

90

Я использую 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

Теги:

6 ответов

160
Лучший ответ

ДЛЯ 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.

Поделиться
  • 0
    Спасибо за ссылку на обновленный jsfiddle. Я не знал, когда делаю оператор класса в css, и это зависит от таблицы, вы должны добавить элемент таблицы перед именем класса. В вашем примере «td.vcenter» работает, но если вы измените его на «.vcenter», он не будет работать.
  • 0
    @TimHabersack: проверь мои изменения, я объясню почему;)
Показать ещё 5 комментариев
41

Небольшое обновление для 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>
Поделиться
  • 0
    Это работает, Bootstrap 3.0.3.
  • 1
    Официально ли документально подтверждено изменение?
14

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

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

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

        <table class="table table-hover table-striped table-vcenter">
Поделиться
  • 3
    Мне нравится этот, потому что вам нужно только добавить класс в 1 месте, а не добавлять его в каждом td .
2

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

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

и это в моем TemplateField

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

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

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

Поделиться
1

Добавьте 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>
Поделиться
  • 1
    Вот странная вещь. Если я делаю это в строке, это работает. Если я создаю класс с вертикальным выравниванием, это не сработает. Я обновил jsfiddle, чтобы отразить это.
  • 2
    Глядя на это в отладчике, я вижу, что класс 'vert' переопределяется загрузочными css. Встроенный стиль имеет приоритет над CSS, поэтому он работает.
Показать ещё 1 комментарий
0

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

table .btn{
  vertical-align: top;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню