CSS:如何用图像居中列表

Question

如何将内部用图像划分的无序列表居中？

我想实现无序列表是一行，居中并且里面的图像也居中，以便图像将列表的其余部分分成两半(topnav-left 和 topnav-right).

我的 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>

我的 CSS:

ul.nav { text-align: center; }

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

这是一个代码笔:demo

Answer 1

尝试使用display:flex;添加这个来添加这个，

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

工作 DEMO