添加边缘对齐图像:

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

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 >

我在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
}

添加边缘对齐图像:

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

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 >

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

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

or

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

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