Css 如何将图像与div底部对齐（在引导中）？

我想能够将不同大小的图像对齐到div的底部

我有以下标记：

<div class="container">
  <div class="container">
    <div class="footer-images">
      <a href="link1"><img src="img1"></a>
      <a href="link2"><img src="img2"></a>
      <a href="link3"><img src="img3"></a>
    </div>
  </div>
  <div class="container">
    <div class="copyright">
      <p>© Some Company YYYY</p>
    </div>
  </div>
</div>

©某公司YYYY

---

我不知道如何将所有图像与页脚图像分区的底部对齐。如有任何帮助，将不胜感激

用于此css并应用

.footer-images img{
width:xxpx;
height:xxpx;           // add here your style as like with height border etc.
vertical-align:top;
border:0;
}

更多关于

这有帮助吗

<style type="text/css">
.footer-images {
    margin: auto;
    display: block;
    position: absolute;
    bottom: 0;
}
.footer-images .copyright {
    text-align: center;
}
</style>

.页脚图像{
保证金：自动；
显示：块；
位置：绝对位置；
底部：0；
}
.footer图像。版权所有{
文本对齐：居中；
}

使用此HTML

<div class="container">
  <div class="container">
    <div class="footer-images">
      <a href="link1"><img src="http://placehold.it/350x150"></a>
      <a href="link2"><img src="http://placehold.it/640x480"></a>
      <a href="link3"><img src="http://placehold.it/120x120"></a>
      <div class="container">
        <div class="copyright">
          <p>© Some Company YYYY</p>
        </div>
      </div>
    </div>
  </div>
</div>

©某公司YYYY

试试这个

 .footer-images img{
        vertical-align:bottom;
        border:0;
        }

这就足够了：

margin-top: auto; 

---

请参见引导v4中的，您可以使用类

align items end

在div中实现底部对齐。您可以在行或列上使用此类

所有列内容与底部对齐的示例

<div class="container">
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

三列之一
三列之一
三列之一

第一列顶部、第二列中间和第三列底部对齐的示例

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

三列之一
三列之一
三列之一

---

资料来源：。

完美。我认为它不起作用，因为我没有包括边界：0；这几乎就是我想要的，但它不适用于不同大小的图像。请看我标记为正确的答案。谢谢你的回答。是不是你输入了“aling”而不是“align”？