StandardNerd StandardNerd - 2 months ago 7
CSS Question

CSS: how to center a list with image

How do I center an unordered list that is divided with an image inside?

I want to achieve that the unordered list is one row, centered and also the image inside is centered so that the image divides the rest of the list in two halves (

topnav-left
and
topnav-right
).

My HTML:

<ul class="nav">
<div class="topnav-left">
<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Women">Women</a>
</li>

<li class="">
<a class="toggle-nav" data-no-turbolink="true" href="Men">Men</a>
</li>

<li class="">
<a href="/de/pages/stores">Stores</a>
</li>

<li class="">
<a href="/de/pages/lifestyle">Lifestyle</a>
</li>
</div>
<div class="nile-logo" style="">
<li>
<a href="/de"><img alt="Logo" src="http://img.logospectrum.com/dec/dummy-logo.jpg"></a>
</li>
</div>
<div class="topnav-right">
<li class="">
<a class="toggle-account-nav" data-no-turbolink="true" href="/de/account">My Account</a>
</li>
<li>
<div class="cart">
<a href="/de/cart">
Warenkorb
</a> </div>
</li>
<li>
<a html="{:class=>&quot;open-wishlist&quot;}" href="/de/wishlist">WUNSCHLISTE</a>
</li>
<li class="language">
<a class="language" href="/en/pages/imprint">EN</a>
<a class="language" href="/fr/pages/imprint">FR</a>
</li>
</div>
</ul>


My CSS:

ul.nav { text-align: center; }

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


Here a codepen: demo

Answer

Try to use display:flex; add this to add this,

ul {display:flex;justify-content: space-around;list-style-type: none;}

ul.nav li { flex:1; text-align: center; } /* Edit from comment by Paulie_D

Working DEMO