如何在表格後居中分頁按鈕？文本對齊不起作用

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>