在柔性显示中水平居中图像？

Question

我不想将图像置于我的弹性导航栏中，但我不能，我已经尝试过这个：How to center an image within a flex item (cell)，但不起作用。

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

我只是用几个更新来更新你的CSS。试试这个我希望它会帮助你。谢谢

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

我不确切地知道你在做什么：

nav #this img {
 height: 5em;
 width: 5em;
}

我想你想要这样的东西：

nav #myimage img {
 height: 5em;
 width: 5em;
}

要以flexbox为中心，请将justify-content用于主轴，并将对齐项目与flexbox父元素中的辅助项对齐。在这种情况下，您可以在nav处执行此操作并将3个直接子节点对齐在中心。

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
  align-items: center;
}

相反，如果你想将图像定位在它的父div中，它是相同的，设置display：flex并将items对齐到父元素（#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>