HTML表:TD数据为中心.垂直和水平

Question

我有一个表。我希望它的数据以垂直和水平为中心。

我已经使用了 align =" Center" valign ="中间" ，但它不起作用。

<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="">[e-mail]</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的表格中。否，有一个CSS规则：.table>tbody>tr>td具有vertical-align: top-在您自己的CSS中覆盖此规则，并将其作为.table>tbody>tr>td {vertical-align: middle}