时间戳

首页 > 解决方案 > 2 行居中对齐 UL

html - 2 行居中对齐 UL

问题描述

我正在尝试将进入 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>

标签： htmlcss

解决方案

请添加以下样式

.header-links-mobile, .header-links-mobile ul {
    width :100%;
}


.header-links-mobile ul {
  flex-wrap: wrap;
}

检查这个小提琴

推荐阅读