Центрирование кнопки по вертикали в ячейке таблицы с помощью 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

523   6  

6 ответов:

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

при использовании в ячейках таблицы, вертикальный-выровняйте делает то, что большинство людей ожидают от него, что должно имитировать (старый, устаревший) атрибут 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>

Проверьте скрипка обновляется!--22-->

далее

кроме того, вы не можете обратиться к 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 in '.класс vert', поэтому вы должны определить этот класс как td.vert.

155  
2017-08-14 18:39:12

небольшое обновление для 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>
43  
2013-10-31 01:00:45

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

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

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

        <table class="table table-hover table-striped table-vcenter">
14  
2013-11-18 03:39:11

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

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

и это в моем TemplateField

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

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

надеюсь, что это помогает

2  
2014-09-18 12:46:07

добавить 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  
2012-12-07 23:35:55

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

table .btn{
  vertical-align: top;
}
0  
2016-03-09 15:37:25

Comments

    Ничего не найдено.
Click here to cancel reply.