web-dev-qa-db-ja.com

Twitter Bootstrapを使用して、ボタンをテーブルセルの垂直方向に中央揃えする

Twitter Bootstrapを使用して、ボタンをテーブルセルの中央に配置しようとしています。本当に必要なのは、垂直方向の中央揃えだけです。

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

問題については、私の JSFiddle をご覧ください。私が知っているいくつかのテーブルセンタリングのトリックを試しましたが、どれも適切に動作しないようです。何か案は？前もって感謝します。

UPDATE：はい、vertical-align:middle;を試してみましたが、インラインの場合は動作しますが、クラス内の場合はtd持っています。これを反映するためにJSFiddleを更新しました。

最終更新：私はばかで、bootstrap.cssによって上書きされているかどうかを確認しませんでした

csstwitter-bootstrap
87
Tim Habersack

BOOTSTRAP 3.Xの場合：

ブートストラップの表セルのスタイルは次のとおりです。

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

進む方法は、独自のクラスを追加し、以前のセレクターにさらに具体性を追加することです。

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

次に、クラスをtdsに追加します。

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

BOOTSTRAP 2.X

Bootstrapでは これを行う方法はありません があります。

テーブルセルで使用する場合、vertical-alignは、ほとんどの人が期待することを行います。これは、（古い、非推奨の）valign属性を模倣します。最新の標準に準拠したブラウザでは、次の3つのコードスニペットが同じことを行います。

<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 を確認してください

さらに

また、Bootstrapにはすでにこのクラスがあるため、.vertを使用してtdクラスを参照することはできません。

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

また、 '。vert'クラスのvertical-align: middleをオーバーロードしているため、このクラスをtd.vertとして定義する必要があります。

156
Tom Sarduy

Bootstrapの小さな更新3。

ブートストラップの表セルのスタイルは次のとおりです。

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

進む方法は、同じセレクターを使用して独自のクラスを追加することです。

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

そして、それをTDSに追加します

<td class="vert-align"></td>
43
Gabriel G. Roy

これをcssに追加します

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

次に、クラスをテーブルに追加します。

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

これを修正するには、このクラスをWebページに配置します

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

これは私のTemplateField

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

cSSクラスはtd（tabledata）要素を直接指し、各設定の最後に！importantの文言があるためです。これは、ルールのブートストラップCSSクラス設定を上書きします。

それが役に立てば幸い

2
Deviney

ボタンを含むtd要素にvertical-align: middle;を追加します

<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>
1
Forty-Two

それでは、なぜtdのデフォルトはvertical-align：top;に設定されているのですか？私はまだそれを本当に知りません。私はそれに触れることを敢えてしないだろう。代わりに、これをスタイルシートに追加します。テーブル内のボタンを変更します。

table .btn{
  vertical-align: top;
}
0
Jens Alenius