html - overflow-x 链接应该在下一行居中

Question

如果 Link that overflow-x 应该在调整浏览器窗口大小时居中于下一行，我该如何做到这一点？ 我只是希望每个在 x 轴上溢出的链接都放在下一行的中心。

/* CSS */
.upper-nav-bar ul {
    border: 1px solid black;
    list-style-type: none;
    margin-top: 0;
    padding-top: 0;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 6%;
    padding-right: 6%;
}

.upper-nav-bar ul li {
    display: inline-block;
}

.upper-nav-bar ul a {
    font-size: 10px;
    text-decoration: none;
    font-family: sans-serif;
    color: #c4cccc;
    text-align: center;
    padding-right: 9px;
    padding-left: 9px;
    text-decoration: none;
}

<div class="upper-nav-bar">
  <ul>
    <li><a href="#!">EPAPER</a></li>
    <li><a href="#!">LIVE TV</a></li>
    <li><a href="#!">DAWNNEWS URDU</a></li>
    <li><a href="#!">IMAGES</a></li>
    <li><a href="#!">EVENTS / SUPPLEMENTS</a></li>
    <li id="last-child"><a href="#!">OBITUARIES</a></li>
  </ul>
</div>

Answer 1

试试这个:

.upper-nav-bar ul {
    text-align: center;
   //other codes...
}

    .upper-nav-bar ul {
    border: 1px solid black;
    list-style-type: none;
    margin-top: 0;
    padding-top: 0;
    margin-left: 6%;
    margin-right: 6%;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    }

    .upper-nav-bar ul li {
    display: inline-block;
    }

    .upper-nav-bar ul a {
    font-size: 10px;
    text-decoration: none;
    font-family: sans-serif;
    color: #c4cccc;
    text-align: center;
    padding-right: 9px;
    padding-left: 9px;
    text-decoration: none;
    }

    <div class="upper-nav-bar">
        <ul>
        <li><a href="#!">EPAPER</a></li>
        <li><a href="#!">LIVE TV</a></li>
        <li><a href="#!">DAWNNEWS URDU</a></li>
        <li><a href="#!">IMAGES</a></li>
        <li><a href="#!">EVENTS / SUPPLEMENTS</a></li>
        <li id="last-child"><a href="#!">OBITUARIES</a></li>
        </ul>
    </div>