html - 溢出的 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/