Datatables align center

Question

I have a table on a page and retrieving and displaying contents using datatables. But the columns are not aligned to the center. This is how it looks right now. Click Here . This is how I am creating the table

$(document).ready(function() {
manageMemberTable = $("#manageMemberTable").DataTable({


    "ajax": "php_actionsms/retrieve.php",
    "order": [[0,'desc']]
});

Html Code :

<div class="container">
    <div class="row">
        <div class="col-md-12">

            <center><h1 class="page-header">TMTRO Iloilo <small>Accident Report Records</small> </h1></center>

            <div class="removeMessages"></div>
            <br /> <br /> <br />

            <table class="table table-responsive " id="manageMemberTable">                  
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Recipient</th>
                        <th>Recipient Number</th>
                        <th>Place</th>
                        <th>Officer</th>
                        <th>Date&Time</th>                                              
                        <th>Sent to Icer</th>
                        <th>Option</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Answer 1

create columnDefs css styling for vertical align center

manageMemberTable = $("#manageMemberTable").DataTable({
     ajax: "php_actionsms/retrieve.php",
     order: [[0, 'desc']],
     columnDefs: [{
         targets: '_all',
         createdCell: function(cell) {
           $(cell).css('vertical-align', 'middle');
         }
     }],
});

or you can use css style like this

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

if you want add also horizontally center table cell then add this css style

table.dataTable>tbody>tr>td {
    text-align:center;
}

add like this columnDefs in datatable

columnDefs: [{
         targets: '_all',
         createdCell: function(cell) {
           $(cell).css('vertical-align', 'middle');
           $(cell).css('text-align', 'center');
         }
     }],

Answer 2

add this when defining datatables:

"columnDefs": [
    {"className": "dt-center", "targets": "_all"}
]

add this to your CSS:

 th.dt-center, td.dt-center { text-align: center; }