如何在表格后居中分页按钮？文本对齐不起作用

Question

这看起来很简单，但我正在努力与CSS。 基本上我有一个表，之后我使用分页系统浏览表内容。真正的桌子有更多的信息，我只是用一个例子来使它看起来更简单。

我在尝试将表格中的分页按钮居中时出现问题。文本对齐属性似乎并没有工作，我不知道为什么。

考虑到100％宽度，我怎样才能将按钮居中放置在中央。

谢谢。

$(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('<a href="#" rel="' + i + '">' + pageNum + '</a> '); 
 
    } 
 
    $('#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

你可以做到这一点。

$(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('<a href="#" rel="' + i + '">' + pageNum + '</a> '); 
 
    } 
 
    $('#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>