在 flex 显示中水平居中图像？

Question

我想在我的 flex 导航栏中将图像居中，但我不能，我已经尝试过这个：，但不起作用。

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

我不知道你到底在用这个做什么：

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

我想你想要这样的东西：

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

要在 flexbox 中居中，请在 flexbox 父元素中使用 justify-content 到主轴和 align-items 到次要轴。在这种情况下，您可以在导航中执行此操作并将 3 个直接子项 div 对齐在中心。

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

相反，如果您想在其父元素中定位图像 div，也是一样，请设置 display: flex 并将项目与父元素 (#myimage) 对齐：

#myimage{
 display:flex;
 align-items:center;
}

Answer 2

我只是更新了你的 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 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>

在 flex 显示中水平居中图像？

Horizontaly center an image in flex display?

css

centering

flexbox