将图像垂直对齐到引导程序“行”内的底部？答案

【问题标题】：vertically aligning images to the bottom inside a bootstrap "row"?将图像垂直对齐到引导程序“行”内的底部？
【发布时间】：2013-03-23 07:56:23
【问题描述】：

我在 row 中有 3 张图像，我想将图像与 row 的底部对齐。

我尝试了其他方法，例如使外部分割位置relative 和图像绝对位置，然后bottom: 0 但它不起作用，因为我使用的是引导程序 (2.3.1)。

我知道还有很多其他类似的问题，例如我的 this 但没有一个解决方案适用于我的。

如何将这些图像垂直对齐到row 的底部？

谢谢

【问题讨论】：

【解决方案1】：

我已经更新了你的 jsFiddle http://jsfiddle.net/Fvswp/5/ 你需要做的就是像这样在你的 img 元素中添加一个 css 属性 display: block;

CSS

img { display: block;}

这将删除底部空间，这是您应该在所有解决此问题的项目中使用的默认代码行。

PS：感谢您发布小提琴

【讨论】：

感谢@Mitchell，但我尝试增加其中一张图片的高度，但没有成功，请查看jsfiddle.net/Fvswp/7
那是因为你的其他图像比你的第一个图像小，你的行高基于其中最大元素的高度，这是你的第一个图像，所以这就是行的高度，现在要将它们全部放在底部，您只需将绝对位置应用于泛型类并将其属性设置为bottom: 0;。
你能否在你的 js fiddle 中再添加几张图片，比如一张小一张，谢谢！
有几种方法可以做到这一点，但由于您的图像已经有 ids，我们可以将标题 position 设置为 relative，然后将 img ids absolute 定位到您所在的位置需要他们，看看我更新的小提琴jsfiddle.net/Fvswp/10
太棒了，不用担心！ PS：我建议使用更好的框架，如基础，将其所有列设置为相对，以便您可以轻松地在任何列中 postion absolute，不过只是一个想法。

【解决方案2】：

使列等高（等于最大图像的高度）并将图像放置在底部的列内：

#header > div {
    height: 128px;
    position: relative;
}
#header > div > img {
    position: absolute;
    bottom: 0;
}

【讨论】：