W3.CSS 中心分页项目溢出

Question

我正在使用 W3.CSS 为我的网站制作一个简单的分页，如下所示...

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet" />
<div class="w3-center footer w3-light-grey">
  <ul class="w3-pagination w3-border w3-round">
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">&laquo;</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">1</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">2</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">3</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">4</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">5</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">6</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">7</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">8</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">9</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">10</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">11</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">12</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">13</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">14</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">15</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">16</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">17</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">18</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">19</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">20</a>
    </li>
    <li><a href="#" class="w3-hover-blue" data-toggle="tooltip" title="Tutorial">&raquo;</a>
    </li>
  </ul>
</div>

如您所见，其中有很多项目，在移动设备上看起来很丑，因为它填满了很多行，左对齐...

我想要做的是将元素居中放在中间，所以它看起来比现在好一点。我在ul 上尝试了text-align:center，但没有成功。怎样才能居中？

Here is a fiddle

Answer 1

你需要在 ul 中使用 text-align center，并为 li 使用 display:inline-block：

ul {
    width:100%;
    height:20px;
    text-align:center;}

li {
    display:inline-block;
    color:white;
    margin-right:10px;}

我的例子是：https://jsfiddle.net/mickey_dt/whh0fdu6/