Horizontaly center an image in flex display? - css

Question

I wan't to center an image in my flex navbar but i can't, i already tried this: How to center an image within a flex item (cell), but doesn't work.
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
}
nav #this img {
height: 5em;
width: 5em;
}
.item {
width: 45%;
display: flex;
justify-content: space-around;
line-height: 3.2em;
font-size: 1.75em;
}
.login {
width: 20%;
display: flex;
justify-content: space-around;
align-self: center;
}
<nav>
<div class="item">
<div> Content </div>
<div> Content </div>
</div>
<div id="myimage">
<img src="https://via.placeholder.com/150x50">
</div>
<div class="login">
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
</div>
</nav>

Answer 1

I just update your CSS with few updates. Try this I hope it'll help you out. Thanks
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
}
nav #this img {
height: 5em;
width: 5em;
}
.item {
width: 45%;
display: flex;
justify-content: space-around;
font-size: 1.75em;
}
.login {
width: 20%;
display: flex;
justify-content: space-around;
align-self: center;
}
.flexItem {
flex: 1;
flex-wrap: wrap;
align-items: center;
}
<nav>
<div class="item flexItem">
<div> Content </div>
<div> Content </div>
</div>
<div id="myimage">
<img src="https://via.placeholder.com/150x50">
</div>
<div class="login flexItem">
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
</div>
</nav>

Answer 2

I dont know exactly what are you doing with this:
nav #this img {
height: 5em;
width: 5em;
}
i think you wanted something like this:
nav #myimage img {
height: 5em;
width: 5em;
}
To center in flexbox, use the justify-content to the primary axis and align-items to the secondary in the flexbox parent element.
in this case you can do it at nav and align the 3 directly children divs at center.
nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
align-items: center;
}
instead if you want to positionate the image in its parent div, its the same, set display: flex and align items to the parent element (#myimage):
#myimage{
display:flex;
align-items:center;
}

Answer 3

nav {
width: 100%;
display: flex;
justify-content: space-between;
border-radius: 1.5em;
}
nav #this img {
height: 5em;
width: 5em;
}
.item {
width: 45%;
display: flex;
justify-content: space-around;
line-height: 3.2em;
font-size: 1.75em;
}
.login {
width: 20%;
display: flex;
justify-content: space-around;
align-self: center;
}
#myimage {
display: flex;
justify-content: center;
align-items: center;
}
<nav>
<div class="item">
<div> Content </div>
<div> Content </div>
</div>
<div id="myimage">
<img src="https://via.placeholder.com/150x50">
</div>
<div class="login">
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
<div> Content </div>
</div>
</nav>