我有一个类似的问题，我的解决方案是添加伸缩:0;到图像。

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

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

它是拉伸的，因为align-self的默认值是拉伸。 这种情况有两种解决方案: 1. 设置img align-self: center 或 2. 设置父align-items: center

img {

   align-self: center
}

OR

.parent {
  align-items: center
}

关键属性是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 >

它是拉伸的，因为align-self的默认值是拉伸。 将align-self设置为居中。

align-self: center;

请参阅文档: align-self

我有一个类似的问题，我的解决方案是添加伸缩:0;到图像。