Twitter Bootstrap kullanarak bir düğmeyi tablo hücresinde dikey olarak ortalamak

Twitter Bootstrap kullanıyorum ve bir tablo hücresinde bir düğmeyi ortalamaya çalışıyorum. Sadece dikey olarak ortalanmasına ihtiyacım var.

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

Lütfen sorun için JSFiddle'ıma bakın . Bildiğim birkaç masa merkezleme yöntemini denedim ama hiçbiri düzgün çalışmıyor. Herhangi bir fikir? Şimdiden teşekkürler.

GÜNCELLEME: Evet, denedim vertical-align:middle;ve satır içi ise işe yarıyor, ancak sahip olduğu bir sınıftaysa değil td. JSFiddle bunu yansıtacak şekilde güncellendi.

Son Güncelleme: Ben bir aptalım ve bootstrap.css tarafından üzerine yazılıp yazılmadığını kontrol etmedim

BOOTSTRAP 3.X İÇİN:

Bootstrap artık tablo hücreleri için aşağıdaki stile sahiptir:

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

Gitmenin yolu, önceki seçiciye daha fazla özgüllük katarak kendi sınıfınızı eklemektir:

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

Ve sonra sınıfı e-postalarınıza ekleyin td:

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

BOOTSTRAP 2.X İÇİN

Bunu Bootstrap ile yapmanın bir yolu yok .

Tablo hücrelerinde kullanıldığında, dikey hizalama , çoğu insanın beklediği şeyi yapar, bu da (eski, kullanımdan kaldırılmış) valign niteliğini taklit eder. Modern, standartlarla uyumlu bir tarayıcıda, aşağıdaki üç kod parçacığı aynı şeyi yapar:

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

Kemanınızın güncellendiğini kontrol edin

Daha ileri

• dikey hizala: Bootstrap 2 ile orta
• Dikey hizalamayı anlama
• Bir div öğesinin dikey hizalaması

Ayrıca, Bootstrap zaten bu sınıfa sahip olduğu için tdkullanarak sınıfa .vertbaşvuramazsınız:

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

Ve vertical-align: middlein '.vert' sınıfını aşırı yüklüyor, bu yüzden bu sınıfı olarak tanımlamalısınız td.vert.

Bootstrap 3 için küçük bir güncelleme.

Bootstrap artık tablo hücreleri için aşağıdaki stile sahiptir:

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

Gitmenin yolu, aynı seçiciyle kendi sınıfınızı eklemektir:

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

Ve sonra tds'nize ekleyin

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

bunu css'ine ekle

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

sonra tablonuza sınıfa ekleyin:

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

Bunu düzeltmek için bu dersi web sayfasına koydum

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

ve bu benim TemplateField'ımda

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

CSS sınıfı doğrudan td (tabledata) öğesine işaret ettiğinden ve her ayarın sonunda! önemli ifadesine sahiptir. Bootraps CSS sınıfı ayarlarını geçersiz kılacaktır.

Umarım yardımcı olur

Ekle vertical-align: middle;için tddüğmeye içeren eleman

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

Öyleyse neden td default'u vertical-align: top ;? Bunu henüz gerçekten bilmiyorum. Dokunmaya cesaret edemem. Bunun yerine bunu stil sayfanıza ekleyin. Tablolardaki düğmeleri değiştirir.

table .btn{
  vertical-align: top;
}