Menengahkan tombol secara vertikal di sel tabel, menggunakan Twitter Bootstrap

90

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

css twitter-bootstrap

— Tim Habersack
sumber

159

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

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.

— Tom Sarduy
sumber

Terima kasih telah menautkan ke jsfiddle yang diperbarui. Saya tidak sadar saat membuat pernyataan kelas di css, dan ini khusus tabel, Anda harus menambahkan elemen tabel sebelum nama kelas. Dalam contoh Anda, 'td.vcenter' berfungsi, tetapi jika Anda mengubahnya hanya menjadi '.vcenter', ini tidak akan berfungsi.

— Tim Habersack

Terima kasih =) Grt help tanpa menggunakan inline css untuk memperbaikinya!

— sk8terboi87 ツ

"vert-align" tidak pernah didokumentasikan dan tidak muncul di master Bootstrap saat ini. Saat menjawab pertanyaan seperti itu, harap tetap berpegang pada perilaku yang terdokumentasi.

— Dr. Jan-Philip Gehrcke

@ Jan-PhilipGehrcke: Saya tidak yakin apa yang Anda maksud, tetapi saya tidak mengatakan itu vert-alignadalah bagian dari Bootstrap, saya berbicara tentang menambahkan kelas BARU di file css utama

— Tom Sarduy

Maaf, saya seharusnya membaca jawaban Anda dengan lebih cermat sebelum membuat pernyataan yang kuat.

— Dr. Jan-Philip Gehrcke

43

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>

— Gabriel G. Roy
sumber

1

Apakah perubahan tersebut didokumentasikan secara resmi?

— pengguna

14

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

— Andrew
sumber

3

Saya suka yang ini karena Anda hanya perlu menambahkan kelas di 1 tempat, bukan menambahkannya di setiap td.

— Hugo Sousa

2

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

— Deviney
sumber

1

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>

— Empat puluh dua
sumber

1

Ini hal yang aneh. Jika saya melakukannya secara inline, itu berhasil. Jika saya membuat kelas, dan memiliki perataan vertikal di dalamnya, itu tidak akan berhasil. Saya memperbarui jsfiddle untuk mencerminkan ini.

— Tim Habersack

2

Melihatnya di debugger, saya melihat kelas 'vert' sedang diganti oleh bootstraps css. Gaya sebaris lebih diutamakan daripada css, jadi itulah mengapa gaya ini berhasil.

— Empat Puluh Dua

@TimHabersack: Saya telah menambahkan kelas dan berfungsi, gunakan td.vertsaja .vert;)

— Tom Sarduy

0

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

— Jens Alenius
sumber