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

【问题标题】：Horizontaly center an image in flex display?在柔性显示中水平居中图像？
【发布时间】：2019-09-03 14:32:57
【问题描述】：

我不想在我的 flex 导航栏中将图像居中，但我不能，我已经尝试过：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>

【问题讨论】：

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

标签： css flexbox centering

【解决方案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>

【讨论】：

【解决方案2】：

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

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

我想你想要这样的东西：

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

要在 flexbox 中居中，请在 flexbox 父元素中将 justify-content 用于主轴，将 align-items 用于辅助轴。在这种情况下，您可以在 nav 中执行此操作，并将 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;
}

【讨论】：

是的，对不起，它是#myimage，谢谢你的回答，这不是我要找的，我不想水平居中，不是垂直，而是 ty :)

【解决方案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>

【讨论】：