How to center pagination buttons after table? text-align not working - html

Question

This seems really simple but I am struggling with CSS.
Basically I have a table and after it I use a pagination system to navigate through the table content. The real table has more information, I just used an example to make it look simpler.
I am having a problem trying to center the buttons for the pagination after the table. The text-align property does not seem to be working and I am not sure why.
How can I center the buttons in the center considering the 100% width.
Thanks.
$(document).ready(function() {
$('#table').after('<div id="nav" class="pagination"></div>');
var rowsShown = 2;
var rowsTotal = $('#table tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#table tbody tr').hide();
$('#table tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#table tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
.table {
width: 100%;
}
.pagination {
display: inline-block;
width: 100%;
text-align: center;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Item</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Sarah</td>
<td>3</td>
</tr>
<tr>
<td>Tom</td>
<td>3</td>
</tr>
<tr>
<td>Kate</td>
<td>1</td>
</tr>
<tr>
<td>Michael</td>
<td>1</td>
</tr>
</tbody>
</table>

Answer 1

You can do this.
$(document).ready(function() {
$('#table').after('<div id="nav" class="pagination"></div>');
var rowsShown = 2;
var rowsTotal = $('#table tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#nav').append('' + pageNum + ' ');
}
$('#table tbody tr').hide();
$('#table tbody tr').slice(0, rowsShown).show();
$('#nav a:first').addClass('active');
$('#nav a').bind('click', function() {
$('#nav a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#table tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({
opacity: 1
}, 300);
});
});
.table {
width: 100%;
}
.pagination {
display: inline-block;
width: 100%;
text-align: center;
display:flex;
justify-content:center;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
}
.pagination a.active {
background-color: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Item</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>Sarah</td>
<td>3</td>
</tr>
<tr>
<td>Tom</td>
<td>3</td>
</tr>
<tr>
<td>Kate</td>
<td>1</td>
</tr>
<tr>
<td>Michael</td>
<td>1</td>
</tr>
</tbody>
</table>