Flexbox - how to make logo in the center and wrap others items around

Question

I have following menu (the .logo and .socials are placed inside by JS) and I need to have .logo always in the middle of page having other items equally wrapped around.

<ul class="menu">
  <li><a href="/">Homepage</a></li>
  <li><a href="/contact/">Contact</a></li>
  <li><a href="/documentary/">Documentary</a></li>
  <div class="logo"></div>
  <li><a href="/stories/">Stories</a></li>
  <li><a href="/weddings/">Weddings</a></li>
  <div class="socials">
    <a href="https://www.instagram.com"><i class="sprite-instagram">i</i></a>
    <a href="https://www.facebook.com"><i class="sprite-email">f</i></a>
  </div>
</ul>

Centering items using CSS, but I have no clue how to stick the .logo in the middle:

.menu {
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

Here is the fiddle if you want to have a look: https://jsfiddle.net/kybernaut/134L25vc/1/

Michael Benjamin · Accepted Answer · 2017-09-08T16:46:41.060

You're working with a flex container, which uses space distribution to position items.

In order to horizontally center the logo, the content to its left and right would need to occupy the same amount of space. This would create equal balance and the logo could be centered.

Alternatively, you could remove the logo from the normal flow with absolute positioning. Then use left and transform to center the logo.

Both methods (and others) are covered in detail here:

Center and right align flexbox elements

Here's an example:

.menu {
  display: flex;
  position: relative;
  justify-content: space-around;
  height: 80px;  
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.menu > * {
  flex: 1;                 /* see linked explanation below */
  list-style-type: none;
  border: 1px dashed black;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo {
  flex: 0 0 200px;           /* also try `flex: 2` */
  background-color: red;  
}

<ul class="menu">
  <li><a href="/">Homepage</a></li>
  <li><a href="/contact/">Contact</a></li>
  <li><a href="/documentary/">Documentary</a></li>
  <div class="logo"></div>
  <li><a href="/stories/">Stories</a></li>
  <li><a href="/weddings/">Weddings</a></li>
  <div class="socials">
    <a href="https://www.instagram.com"><i class="sprite-instagram">i</i></a>
    <a href="https://www.facebook.com"><i class="sprite-email">f</i></a>
  </div>
</ul>

How flex: 1 works:

Make flex-grow expand items based on their original size

To make all the elements same size, I have added `flex-basis: 100%` to all `.li` and `.socials` elements and `flex-basis: 200%` to the `.logo` and that solved my troubles nicely — Karolína Vyskočilová, Sep 08 '17 at 12:57
I'm glad that works for you. It's sort of a brute-force solution. I've added a more natural and efficient method. See the linked posts for complete explanations. — Michael Benjamin, Sep 08 '17 at 16:48

score 0 · Answer 2 · answered Sep 07 '17 at 20:06

0

Another li's makes flex item smaller by pushing it. It's impossible, while all of your li's doesn't have enough space to display.

answered Sep 07 '17 at 20:06

P.S.

15,970
14
62
86

score 0 · Answer 3 · edited Sep 07 '17 at 21:50

This code should work for you (I assummed you didn't want the bullet points so I added (list-style:none) also....

.menu {
  sisplay: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  position: relative;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.menuitem {
  width: 14.28%;
  text-align: center;
}

.logo {
  width: 14.28%;
  text-align: center;
}

<ul class="menu">
  <li class="menuitem"><a href="/">Homepage</a></li>
  <li class="menuitem"><a href="/contact/">Contact</a></li>
  <li class="menuitem"><a href="/documentary/">Documentary</a></li>
  <li class="logo"><img src="https://www.logogarden.com/wp-content/uploads/lg-index/Example-Logo-6.jpg" width="100%"></li>
  <li class="menuitem"><a href="/stories/">Stories</a></li>
  <li class="menuitem"><a href="/weddings/">Weddings</a></li>
  <li class="menuitem">
    <div class="socials">
      <a href="https://www.instagram.com"><i class="sprite-instagram">i</i></a>
      <a href="https://www.facebook.com"><i class="sprite-email">f</i></a>
    </div>
  </li>
</ul>

Flexbox - how to make logo in the center and wrap others items around

3 Answers3