如何在Bootstrap中将图片对齐到div底部？

Question

我希望能够将不同大小的图像对齐到一个 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>

我无法弄清如何将所有图像对齐到页脚图像div的底部。非常感谢您的帮助。

- Sheldon

Answer 1

尝试这个

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

- Prashobh

---

完美。我认为它没有工作是因为我没有包含border:0; - Sheldon

Answer 2

在Bootstrap 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>

Source: Bootstrap documentation.

- FreshSnow

Answer 3

这有帮助吗？

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

使用这个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>

- Kane

Answer 4

这就足够了：

margin-top: auto; 

请查看https://jsfiddle.net/d3jau1gx/

- Pavel Novák

Answer 5

习惯于这个CSS并应用

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

关于Bootstrap的更多信息

- Rohit Azad Malik

---

这几乎是我想要的，但对于不同尺寸的图像无效。请参见我标记为正确的答案。感谢您的回答。 - Sheldon

你是不是打成了'aling'而不是'align'? - Robbie Smith