CODEWITHSUNDEEP
css
StandardNerd
StandardNerd

Reputation: 4183

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

Upvotes: 0

Views: 35

Answers (2)

Carl0s1z
Carl0s1z

Reputation: 4723

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

Upvotes: 2

Johannes
Johannes

Reputation: 67799

You mean like this?:

http://codepen.io/anon/pen/pENYLZ

ul.nav li { 
  display: block;
 }

Or like this?:

http://codepen.io/anon/pen/mAOoKN

ul.nav {
  margin: 0 auto;
  width: 200px;
  position: relative;
}

ul.nav li {
  display: block;
}

Upvotes: 0

Related Questions