CSS Flexbox - Center a div between two divs [duplicate]
Multi tool use
CSS Flexbox - Center a div between two divs [duplicate]
This question already has an answer here:
I have a logo between a nav and a search button and I want to center the logo in the page. Using a horizontal auto margin makes the center div go to the right as the content on the left is larger.
.flexbox {
display: flex;
}
.logo {
margin: 0 auto;
}
<div class="flexbox">
<div class="left-nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
<a href="#">Link5</a>
<a href="#">Link6</a>
<a href="#">Link7</a>
<a href="#">Link8</a>
</div>
<div class="logo">
Logo
</div>
<div class="right-search">
search
</div>
</div>
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
3 Answers
3
Try this for your css.
It makes the divs a certain width on the monitor, and centers the logo text.
.flexbox {
display: flex;
}
.left-nav{
width:25%;
}
.logo {
width:50%;
text-align: center;
}
.right-search{
width:25%;
}
<div class="flexbox">
<div class="left-nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
<a href="#">Link5</a>
<a href="#">Link6</a>
<a href="#">Link7</a>
<a href="#">Link8</a>
</div>
<div class="logo">
Logo
</div>
<div class="right-search">
search
</div>
</div>
Or
.flexbox {
display: flex;
}
.left-nav,
.right-search {
flex: 0 0 25%;
}
.logo {
flex: 0 0 50%;
text-align: center;
}
And don't forget to add vendor prefixes.
You need to set a flex-basis value & then set the shrink value on these elements, so they can have a respective width based on its basis.
You also need to declare align-items: center
align-items: center
.flexbox {
display: flex;
align-items: center;
}
.flexbox>div {
flex-basis: 33%;
}
.left-nav {
flex-flow: column wrap;
flex-shrink: 2;
}
.logo {
flex-shrink: 1;
text-align: center;
}
.right-search {
flex-shrink: 2;
}
<div class="flexbox">
<div class="left-nav">
<a href="#">Link1</a>
<a href="#">Link2</a>
<a href="#">Link3</a>
<a href="#">Link4</a>
<a href="#">Link5</a>
<a href="#">Link6</a>
<a href="#">Link7</a>
<a href="#">Link8</a>
</div>
<div class="logo">
Logo
</div>
<div class="right-search">
search
</div>
</div>
