Paging number list alignment in datatable

Question

I am having problems aligning paging numbers in datatables, below is the code.

Datatables library is used to dynamicaly generate a table which includes a paginate and search functionality. I customized the paginate numbering with CSS however the alignment seem to be off the grid.

.dataTables_paginate a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

.dataTables_paginate a.active {
    background-color: #4CAF50;
    color: white;
}

.dataTables_paginate a:hover:not(.active) {background-color: #ddd;}

The paging is not aligning to the grid.

Datatable EJS

<h2><% var projectlist = JSON.parse(data); %></h2>
<table id="example" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">CSI ID</th>
      <th scope="col">App Name</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
     <!-- get projects array from the data property -->
<% var counter = 0; %>
<% var evale = 'CSI:'; %>

<% for (var key in projectlist) { %>

  <% if (projectlist.hasOwnProperty(key)) { %>
    <% var csiid = projectlist[key].name.substring(projectlist[key].name.lastIndexOf(":")+1,projectlist[key].name.lastIndexOf("]")); %>
    <% if (projectlist[key].name.match(evale)) { %>
    <% counter = counter + 1; %>
    <tr>
    <td><%= counter %></td>
    <td><%= csiid %></td>
    <td><%= projectlist[key].name.replace(/\[.*?\]\s?/g, '') %></td>
     <td>TESTED</td>
    </tr>
  <% } %>
  <% } %>
   <% } %>


  </tbody>
</table>

Paginate runtime HTML generated by datatables.js

<div class="dataTables_paginate paging_simple_numbers" id="example_paginate">
    <a class="paginate_button previous disabled" aria-controls="example" data-dt-idx="0" tabindex="0" id="example_previous">Previous</a>
    <span>
        <a class="paginate_button current" aria-controls="example" data-dt-idx="1" tabindex="0">1</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="2" tabindex="0">2</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="3" tabindex="0">3</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="4" tabindex="0">4</a>
        <a class="paginate_button " aria-controls="example" data-dt-idx="5" tabindex="0">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button " aria-controls="example" data-dt-idx="6" tabindex="0">33</a>
    </span>
    <a class="paginate_button next" aria-controls="example" data-dt-idx="7" tabindex="0" id="example_next">Next</a>
</div>

Answer 1

you can easily do that by using the below css:

.dataTables_paginate{
display:flex;
align-items:center;
}
.dataTables_paginate a{
padding:0 10px;
}

Display flex will wrap all elements in single row. Align Items center will position the elements vertically center.

Answer 2

Your "clear example" works great.

So I think some of needed styles was declarated somewhere with higher priority.

If it's not possible to remove other declaration, add !important to float. And add display to be sure.

...
.dataTables_paginate a {
    color: black;
    display: block !important;
    float: left !important;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
 }
 ...

Of course it'll work only if your CSS has connected.