桌子后如何将分页按钮居中？ text-align无效

Question

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

我在尝试将桌子后面的按钮居中时遇到问题。 text-align属性似乎不起作用，我不确定原因。

考虑到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>