中心将UL对齐2行

Question

我正试图将我的菜单中心对齐到2行。

我正在使用ul li。不确定这是不是最好的选择。我已经从SO上发布的帖子中删除了所有内容，但没有做任何事情：（

我希望它能够进入2行但仍然居中

以下是屏幕截图：

CSS：

@media only screen and (min-width: 300px) and (max-width: 480px) {
.header-links-mobile {
  display:inline-block;
  width:80%;
  position:absolute;
  top:60px;
  left:0%;
  text-align:center;
}

.header-links-mobile ul {
  width:90%;
  margin:auto;
  padding:0;
  display: flex;
  justify-content: center;
}

.header-links-mobile ul li { 
  color:#fff;
  padding:5px 5px 0 5px;
  display: inline;
  text-align: center;
}

.header-links-mobile ul li a { 
  color:#fff;
}

.header-links-mobile ul li a:hover {
  color:#fff;
}
}

HTML

<div class="header-links-mobile">
  <ul>
    <li>
      <a href="/mass-supply-live/Admin" class="administration">Admin Panel</a>
    </li>
    <li>
      <a href="/mass-supply-live/order/history" class="account">asheenk@cyphernet.co.za</a>
    </li>
    <li>
      <a href="/mass-supply-live/logout" class="ico-logout">Log out</a>
    </li>
    <li class="ico-account-wrapper">
      <a href="/mass-supply-live/customer/spend-meter" class="ico-logout">My account</a>
    </li>
    <li>
      <a href="/mass-supply-live/cart" class="ico-cart" id="topcartlink">
        <span class="cart-label">Shopping cart</span>
        <span class="cart-qty">(54 ITEM)</span>
      </a>
    </li>
  </ul>
</div>

Answer 1

请添加以下样式

../name/name/name

选中此fiddle