user123 user123 - 9 days ago 6
CSS Question

Html Table : td data to be center. vertically and horizontally

I have a Table. I want its data to be centered vertically and horizontally.

I have used align="center" valign="middle" , but it didn't work.



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





Any help would be great.

Thank You.

Answer

valign="middle" does not work because it is overridden by Bootstrap. In Bootstrap's tables.less, there is a CSS rule: .table>tbody>tr>td has vertical-align: top -- Override this rule in your own CSS and make it as .table>tbody>tr>td {vertical-align: middle}