display flex - centered in relation to my central element

Question

My probleme is difficult to explain but i will try. I develop a web site. For my nav-bar i have 3 div in a header (burger-menu / loogo / social-networks). I use flex for display with justify-content: between. My probleme is i want to center my second div by the viewport and not by my two other divs. Someone know how to do ?

(Please excuse my bad English)

<header>
        <div class="burger">
            <img src="assets/img/cutlery.svg" alt="icône couteau cuillère burger menu">
        </div>
        <div class="logo">
            <img src="assets/img/bio.svg" alt="">
        </div>
        <div class="network">
            <a href="#">
                <img src="assets/img/facebook.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/linkedin.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/instagram.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/france.svg" alt="">
            </a>
            <a href="#">
                <img src="assets/img/english.svg" alt="">
            </a>
        </div>
    </header>

Can you explain more with some images? – ExploreNav Nov 21 '19 at 17:49 — ExploreNav, Nov 21 '19 at 17:49

Emil Laskowski · Answer 1 · 2019-11-21T17:59:52.087

You can add

  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;

to your second div. Look here:

header{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.logo{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
}

<header>
    <div class="burger">
        Burger
    </div>
    <div class="logo">
        Logo
    </div>
    <div class="network">
        <a href="#">
            Fb
        </a>
        <a href="#">
            Ln
        </a>
        <a href="#">
            I
        </a>
        <a href="#">
            Fr
        </a>
        <a href="#">
            En
        </a>
    </div>
</header>

Can you please elaborate as to why this works for future readers? +1 — Hazel へいぜる, Nov 21 '19 at 18:07

VSM · Answer 2 · 2019-11-26T17:17:22.970

This answer well be helpful.

header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
}

header > div {
  display: inline-flex;
  flex-basis: 33.33%;
  align-items: center;
}

.burger {
  justify-content: flex-start;
  background-color: #AAAAAA;
}

.logo {
  justify-content: center;
  background-color: #DDDDDD;
}

.network {
  justify-content: flex-end;
  background-color: #AAAAAA;
}

<header>
    <div class="burger">
        <span>01</span>
        <img src="assets/img/cutlery.svg" alt="">
    </div>
    <div class="logo">
        <span>02</span>
        <img src="assets/img/bio.svg" alt="">
    </div>
    <div class="network">
        <a href="#">
            <span>03</span>
            <img src="assets/img/facebook.svg" alt="">
        </a>
        <a href="#">
            <span>04</span>
            <img src="assets/img/linkedin.svg" alt="">
        </a>
        <a href="#">
            <span>05</span>
            <img src="assets/img/instagram.svg" alt="">
        </a>
        <a href="#">
            <span>06</span>
            <img src="assets/img/france.svg" alt="">
        </a>
        <a href="#">
            <span>07</span>
            <img src="assets/img/english.svg" alt="">
        </a>
    </div>
</header>

score 1 · Answer 3 · answered Nov 21 '19 at 18:04

Or you can have like this.

header{
  display: flex;
 width: 100%;
 justify-content: space-between;
}
.right-menu{
display: flex;
flex: 0 0 55%;
  justify-content: space-between;
}
.right-menu ul{
list-style:none;
margin:0;
}
.right-menu ul li{
display:inline-block;
}

<header>
    <div class="burger">
        Burger
    </div>
    
    <div class="right-menu">
    <div class="logo">
        Logo
    </div>
    <ul>
    <li>
      <a href="#">
            Fb
        </a>
       </li>
    <li>
        <a href="#">
            Ln
        </a>
       </li>
    <li>
        <a href="#">
            I
        </a>
       </li>
    <li>
        <a href="#">
            Fr
        </a>
       </li>
    <li>
        <a href="#">
            En
        </a>
       </li>
    </ul>
      
    </div>
</header>

score 1 · Accepted Answer · answered Nov 21 '19 at 18:16

Just tested the code below, and it works. This is to give an idea; CSS attributes have to be in separate file of course:

<div style="display:flex;flex-direction:row;width:100%">
    <div style="flex:1 1 0px">
        <span style="float:right;background-color:lime">Left Element</span>
    </div>
    <div style="background-color:blue">Central element</div>
    <div style="flex:1 1 0px">
        <span style="background-color:red">Right 1</span>
        <span style="background-color:gray">Right 2</span>
        <span style="background-color:magenta">Right 3</span>
    </div>
</div>

score 1 · Answer 5 · answered Nov 21 '19 at 18:27

Give all the child elements of the flexbox a flex: 1 to give them the same width, then give your .logo div a text-align: center.

header {
  display: flex;
  width: 960px;
  background: lightblue;
}

header>* {
  flex: 1;
}

header .logo {
  text-align: center;
}

header .network {
  text-align: right;
}

<header>
  <div class="burger">
    <img src="http://placekitten.com/40/40" alt="icône couteau cuillère burger menu">
  </div>
  <div class="logo">
    <img src="http://placekitten.com/200/100" alt="">
  </div>
  <div class="network">
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
    <a href="#">
      <img src="http://placekitten.com/50/50" alt="">
    </a>
  </div>
</header>

display flex - centered in relation to my central element

5 Answers5