92

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によって上書きされているかどうかを確認しませんでした

4

6 に答える 6

160

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

Bootstrap には、テーブル セル用に次のスタイルが追加されました。

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

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

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

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

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

于 2012-12-07T21:43:02.833 に答える
43

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>
于 2013-10-30T23:00:45.490 に答える
2

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

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

そしてこれは私のTemplateFieldにあります

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

CSS クラスは td (tabledata) 要素を直接指し、各設定の最後に !important ステートメントがあるためです。ブートストラップの CSS クラス設定を上書きします。

それが役に立てば幸い

于 2014-09-18T09:46:07.500 に答える
1

ボタンを含む要素に追加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>
于 2012-12-07T21:35:55.260 に答える