Html Table : 以 td 数据为中心。垂直和水平

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" 不起作用，因为它被 Bootstrap 覆盖。在Bootstrap的tables.less中有一条CSS规则：.table>tbody>tr>td has vertical-align: top -- 在你自己的CSS中覆盖这条规则，使其为.table>tbody>tr>td {vertical-align: middle}