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

Question 1

私は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を参照してください。私が知っているいくつかのテーブルセンタリングトリックを試しましたが、どれも正しく機能していないようです。何か案は？前もって感謝します。

更新：はい、私は試してみましたがvertical-align:middle;、インラインの場合tdは機能しますが、クラス内にある場合は機能しません。これを反映するようにJSFiddleを更新しました。

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

Question 2

ブートストラップ3.Xの場合：

Bootstrapのテーブルセルのスタイルは次のとおりです。

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

先に進むには、独自のクラスを追加して、前のセレクターにさらに具体性を追加します。

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

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

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

ブートストラップ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>

更新されたフィドルを確認してください

さらに

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

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

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

Question 3

Bootstrap 3の小さなアップデート。

Bootstrapのテーブルセルのスタイルは次のとおりです。

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

行く方法は、同じセレクターで独自のクラスを追加することです：

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

そしてそれをあなたのTDSに追加します

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

Question 4

これをあなたのCSSに追加してください

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

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

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

Question 5

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

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

そしてこれは私のTemplateField

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

CSSクラスはtd（tabledata）要素を直接ポイントし、各設定の最後に！importantステートメントがあります。ブートストラップCSSクラスの設定を上書きします。

それが役に立てば幸い

Question 6

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

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

Question 7

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

table .btn{
  vertical-align: top;
}