display flex - centered in relation to my central element [duplicate] - html

Question

This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 3 years ago.
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>

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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>

Answer 5

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>