Centrowanie przycisku w komórce tabeli w pionie za pomocą Twittera Bootstrap

Używam Twitter Bootstrap i próbuję wyśrodkować przycisk w komórce tabeli. Naprawdę potrzebuję tylko wyśrodkowania w pionie.

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

Proszę zajrzeć do mojego JSFiddle dla problemu. Wypróbowałem kilka sztuczek z centrowaniem stołu, o których wiem, ale żadna z nich nie działa poprawnie. Jakieś pomysły? Z góry dziękuję.

AKTUALIZACJA: Tak, próbowałem vertical-align:middle;i to działa, jeśli jest wbudowane, ale nie jeśli jest w klasie, którą tdma. Zaktualizowano JSFiddle, aby to odzwierciedlić.

Ostatnia aktualizacja: jestem idiotą i nie sprawdziłem, czy został nadpisany przez plik bootstrap.css

DLA BOOTSTRAP 3.X:

Bootstrap ma teraz następujący styl dla komórek tabeli:

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

Najlepszym sposobem jest dodanie własnej klasy, dodając więcej szczegółów do poprzedniego selektora:

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

Następnie dodaj klasę do swoich td:

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

DLA BOOTSTRAP 2.X

Nie ma sposobu, aby to zrobić za pomocą Bootstrap.

W przypadku użycia w komórkach tabeli wyrównanie wertykalne robi to, czego oczekuje większość ludzi, czyli naśladuje (stary, przestarzały) atrybut valign. W nowoczesnej, zgodnej ze standardami przeglądarce te trzy fragmenty kodu robią to samo:

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

Sprawdź zaktualizowane skrzypce

Dalej

• wyrównanie w pionie: środek z Bootstrap 2
• Zrozumienie wyrównywania w pionie
• Wyrównanie w pionie elementów w div

Nie możesz też odwołać się do tdklasy używając, .vertponieważ Bootstrap ma już tę klasę:

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

I przeciąża vertical-align: middleklasę in '.vert', więc musisz zdefiniować tę klasę jako td.vert.

Mała aktualizacja dla Bootstrap 3.

Bootstrap ma teraz następujący styl dla komórek tabeli:

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

Najlepszym sposobem jest dodanie własnej klasy z tym samym selektorem:

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

A następnie dodaj go do swoich tds

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

dodaj to do swojego css

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

następnie dodaj do klasy do swojego stołu:

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

Aby to naprawić, umieściłem tę klasę na stronie internetowej

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

i to w moim TemplateField

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

ponieważ klasa CSS wskazuje bezpośrednio na element td (tabledata) i ma! Important na końcu każdego ustawienia. Zmieni on reguły bootraps ustawień klas CSS.

Mam nadzieję, że to pomoże

Dodaj vertical-align: middle;do tdelementu zawierającego przycisk

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

Dlaczego więc domyślnie td jest ustawione na vertical-align: top ;? Naprawdę jeszcze tego nie wiem. Nie odważyłbym się tego dotknąć. Zamiast tego dodaj to do swojego arkusza stylów. Zmienia przyciski w tabelach.

table .btn{
  vertical-align: top;
}