I'm struggling to center align my menu that spans 2 lines.
I'm currently using ul li and I'm not sure if this is the best approach. I've tried various solutions from Stack Overflow, but nothing seems to be working :(
I want the menu to span 2 lines and still be centered
Here's a screenshot of how it currently looks:
https://i.sstatic.net/jxo65.jpg
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"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1f0d161b1b10153e1d070e161b0c101b0a501d1150041f">[email protected]</a></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>