Menengahkan tombol secara vertikal di sel tabel, menggunakan Twitter Bootstrap

Saya menggunakan Twitter Bootstrap, dan mencoba memusatkan tombol di dalam sel tabel. Saya hanya benar-benar membutuhkannya di tengah secara vertikal.

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

Silakan lihat JSFiddle saya untuk mengetahui masalahnya. Saya telah mencoba beberapa trik pemusatan tabel yang saya ketahui, tetapi tampaknya tidak ada yang berfungsi dengan baik. Ada ide? Terima kasih sebelumnya.

UPDATE: Ya, saya sudah mencoba vertical-align:middle;, dan itu berfungsi jika inline, tetapi tidak jika itu di kelas yang tdmemiliki. Memperbarui JSFiddle untuk mencerminkan ini.

Pembaruan Terakhir: Saya idiot, dan tidak memeriksa untuk melihat apakah itu ditimpa oleh bootstrap.css

UNTUK BOOTSTRAP 3.X:

Bootstrap sekarang memiliki gaya berikut untuk sel tabel:

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

Cara yang harus dilakukan adalah menambahkan kelas Anda sendiri, menambahkan lebih banyak kekhususan ke pemilih sebelumnya:

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

Dan kemudian tambahkan kelas ke tds Anda :

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

UNTUK BOOTSTRAP 2.X

Tidak ada cara untuk melakukan ini dengan Bootstrap.

Saat digunakan dalam sel tabel, perataan vertikal melakukan apa yang diharapkan kebanyakan orang, yaitu meniru atribut valign (old, deprecated). Di browser modern yang memenuhi standar, tiga cuplikan kode berikut melakukan hal yang sama:

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

Periksa biola Anda diperbarui

Lebih lanjut

• vertical-align: middle dengan Bootstrap 2
• Memahami perataan vertikal
• Perataan vertikal elemen dalam div

Juga, Anda tidak dapat merujuk ke tdkelas menggunakan .vertkarena Bootstrap sudah memiliki kelas ini:

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

Dan membebani kelas vertical-align: middledalam '.vert', jadi Anda harus mendefinisikan kelas ini sebagai td.vert.

Sedikit pembaruan untuk Bootstrap 3.

Bootstrap sekarang memiliki gaya berikut untuk sel tabel:

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

Cara melakukannya adalah dengan menambahkan kelas Anda sendiri, dengan selektor yang sama:

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

Dan kemudian tambahkan ke tds Anda

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

tambahkan ini ke css Anda

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

lalu tambahkan ke kelas ke tabel Anda:

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

Untuk memperbaikinya, saya meletakkan kelas ini di halaman web

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

dan ini di TemplateField saya

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

karena kelas CSS menunjuk langsung ke elemen td (tabledata) dan memiliki pernyataan! important di akhir setiap pengaturan. Ini akan melebihi aturan bootraps pengaturan kelas CSS.

Semoga membantu

Tambahkan vertical-align: middle;ke tdelemen yang berisi tombol

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

Jadi mengapa td default disetel ke vertical-align: top ;? Saya benar-benar belum tahu itu. Saya tidak akan berani menyentuhnya. Sebagai gantinya tambahkan ini ke lembar gaya Anda. Ini mengubah tombol di tabel.

table .btn{
  vertical-align: top;
}