SORU
7 Aralık 2012, Cuma


Dikey bir düğme tablo hücresinde ortalama, Twitter Bootstrap kullanarak

Twitter Bootstrap kullanarak, bir tablo hücresi içinde bir düğme merkezi getiriyorum. Ben sadece gerçekten dikey olarak ortalanmış gerekiyor.

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

Sorun için JSFiddle benim bakın lütfen. Hakkında bildiğim birkaç tablo ortalama hileler denedim, ama hiçbiri düzgün çalışmıyor gibi görünüyor. Herhangi bir fikir? Şimdiden teşekkürler.

GÜNCELLEME:Evet, eğer içi falan ama eğer td bir sınıfta ise çalışan vertical-align:middle; ve denedim. Bu JSFiddle bu yansıtmak için güncellendi.

Son Güncelleme:Ben bir aptalım, ve eğer bootstrap ile üzerine olup olmadığını görmek için onay vermedi.css

CEVAP
7 Aralık 2012, Cuma


BOOTSTRAP 3 İÇİN.X:

@GabbrielGRoy için teşekkürler

Bootstrap şimdi tablo hücreleri için aşağıdaki tarzı vardır:

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

Gitmek için yol, aynı seçici: kendi başına bir sınıf ekleyin

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

Ve sonra tdler eklemek:

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

BOOTSTRAP 2 İÇİN.X

Bootstrap ile no way to do this var.

Tablo hücreleri kullanılırdikey hizalamaçoğu kişi bunu bekliyor, (eski), itiraz class özniteliği taklit olan nedir. Standartlarla uyumlu tarayıcı, aşağıdaki üç kod parçacıkları modern içinde aynı şey

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

fiddle updated kontrol edin

Daha fazla

Ayrıca, Bootstrap zaten bu sınıf olduğundan td sınıfı .vert kullanarak başvurabilirsiniz:

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

vertical-align: middle aşırı yükleniyor '.'dersliği td.vert olarak bu sınıfı tanımlamak gerekir. vert

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Pocketnow

    Pocketnow

    14 EKİM 2007
  • TheTwistedFrequency

    TheTwistedFr

    26 NİSAN 2010
  • tychoadragmire

    tychoadragmi

    20 Mart 2006