我在Foundation菜单上也遇到了同样的问题。align-self:中心;对我没用。

我的解决方案是用<div style="display: inline-table;">

关键属性是align-self: center:

.container { 显示:flex; flex-direction:列; } img { max-width: 100%; } img。align-self { align-self:中心; } < div class = "容器" > 没有align-self: < p > < / p > <img src="http://i.imgur.com/NFBYJ3hs.jpg" /> 与align-self: < p > < / p > <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" /> < / div >

使用下面的CSS设置之一:最流行的是包含或覆盖

.my-img {
  object-fit: contain;
}

or

.my-img {
  object-fit: cover;
}

我在制作导航栏时也遇到了类似的问题，但上面的方法都不适合我。

我的解决方案是为图像增加高度:100%。

如果你要水平对齐，添加宽度:100%。

编辑:Chrome似乎默认添加这个值，但你需要添加这个兼容性。

我在Foundation菜单上也遇到了同样的问题。align-self:中心;对我没用。

我的解决方案是用<div style="display: inline-table;">

添加边缘对齐图像:

因为我们希望图像是左对齐的，我们添加了:

img {
  margin-right: auto;
}

类似地，对于右对齐的图像，我们可以添加margin-right: auto;。这段代码显示了两种对齐类型的演示。

祝你好运…

div { 显示:flex; flex-direction:列; 边框:2px黑色实心; ｝ h1 { text-align:中心; ｝ 人力资源{ 边框:1px黑色实心; 宽度:100% ｝ img。一个{ margin-right:汽车; ｝ img。两个{ margin-left:汽车; ｝ < div > <标题> Flex框< / h1 > <人力资源/ > <img src="https://via.placeholder.com/80x80" class="one" /> <img src="https://via.placeholder.com/80x80" class="two" /> <人力资源/ > < / div >