Htmlテーブル：中心になるデータ。縦横に

Question

私はテーブルを持っています。私はそのデータを縦と横の中央に置いて欲しい。

私はalign = "center" valign = "middle"を使用しましたが、動作しませんでした。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="row"><div class="col-sm-12 col-md-12"> 
 
         <div class="table-responsive"> <table ui-jq="dataTable" ui-options="{ 
 
      sAjaxSource: 'api/datatable.json', 
 
      aoColumns: [ 
 
      { mData: 'name' }, 
 
      { mData: 'email_id' }, 
 
      { mData: 'seq_no' }, 
 
      { mData: 'ticket_type' }, 
 
      { mData: 'amount' }, 
 
      { mData: 'paid' }, 
 
      { mData: 'order_date' }, 
 
      { mData: 'payment_refund' } 
 
      ] 
 
     }" class="table table-striped b-t b-b dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info" > 
 
          
 
<thead> 
 
         <tr role="row" class="font-bold text-center no_border"> 
 
          <th class="text-center sorting_asc no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column descendig" aria-sort="ascending"></th> 
 
          <th class="text-center sorting_asc no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Rendering engine: activate to sort column descendig" aria-sort="ascending">Name</th> 
 
          <th class="text-center sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">Emai Id</th> 
 
          <th class="text-center sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Platform(s): activate to sort column ascending">Seq No</th> 
 
          <th class="text-center sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">Ticket Type</th> 
 
          <th class="text-center sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Amount</th> 
 
          <!--<th style="width: 120px;" class="sorting no_border" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="CSS grade: activate to sort column ascending">Payment</th>--> 
 
         </tr> 
 
        </thead> 
 
        
 
        <tbody> 
 
        <tr class="odd text-center" role="row"> 
 
         <td align="center" valign="middle"><img class="img-circle vertical_align_middle" width="35" height="35" src="http://www.top13.net/wp-content/uploads/2014/11/32-small-flowers.jpg"></td> 
 
         <td align="center" valign="middle">Saumil</td> 
 
         <td class="">agarwal8542@gmail.com</td> 
 
         <td class="">VGA 1001</td> 
 
         <td class="">Lark - Super Early Bird</td> 
 
         <td class="center"> 
 
          <button class="btn m-b-xs w-xs btn-success upgrade_btn padding_left_right_6 padding_top_0">Refund</button> 
 
         </td> 
 
        </tr> 
 
        </tbody> 
 
</table>

すべてのヘルプは素晴らしいことです。

Answer 1

valign="middle"ブートストラップによって上書きされるため、動作しません。ブートストラップのtables.lessでは、CSSルールがあります：.table>tbody>tr>tdはvertical-align: topを持っている - あなた自身のCSSでこのルールをオーバーライドし.table>tbody>tr>td {vertical-align: middle}