无法在 jumbotron 中底部对齐图像答案

【问题标题】：Cannot bottom align image in jumbotron无法在 jumbotron 中底部对齐图像
【发布时间】：2017-11-22 03:00:36
【问题描述】：

我正在尝试在 jumbotron 中底部对齐 img，但无法弄清楚。

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <h1>Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-lg">Learn more »</a></p>
            </div>
            <div class="col-lg-4 text-center">
                <img src="http://via.placeholder.com/200x200">
            </div>
        </div>
    </div>
</div>

我尝试将以下内容添加到 CSS 中

.vertical-bottom {
  display: flex;
  align-items: bottom;
}

然后将附加类添加到包含img的DIV中

<div class="col-lg-4 text-center vertical-bottom">

这不起作用，为什么在引导程序中垂直对齐内容如此困难？

【问题讨论】：

问题不在于引导程序。在支持 flex-box 之前，垂直居中的东西是半困难的。然而，Bootstrap 4 允许您使用与其列/网格系统一起工作的弹性盒类。回到问题，你想达到什么结果？图片将水平居中但位于标题、文本和按钮下方？
@hunter-mitchell 我希望图像水平居中并且底部对齐到包含标题、文本和按钮的 div 的一侧。所以 1 行 2 列都底部对齐。我想过尝试用标题、文本和按钮来计算 div 的高度，然后设置图像的上边距以得到底部对齐。但是，我不确定如何获得该 div 的高度？
Bootstrap 4 有一个非常好的网格系统，支持 flexbox。我建议您使用它（无需删除两列上的浮动并手动定位每列，以便将子级高度设置为 100%）。当我得到改变时，我会举一个例子。

标签： twitter-bootstrap-3 vertical-alignment

【解决方案1】：

这里有一种代码：

Bootply

CSS： 媒体查询设置为 1200，因为我看到你正在使用 col-lg-xx

@media screen and (min-width:1200px) {
  .flex_container img{
      object-fit: contain;
      object-position: 100% 100%;
  }
  .flex_container {
    display: flex;
  }
}

HTML：

<div class="jumbotron">
    <div class="container">
        <div class="row flex_container">
            <div class="col-lg-8">
                <h1>Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-lg">Learn more »</a></p>
            </div>
            <div class="col-lg-4 text-center flex_container">
                <img src="http://via.placeholder.com/200x200" style="">
            </div>
        </div>
    </div>
</div>

【讨论】：

谢谢，这成功了！但我可能会开始迁移到 Bootstrap 4，它似乎提供了一些更好的 flexbox 支持，正如@hunter-mitchell 所建议的那样。
虽然，我似乎失去了对水平放置的控制。 text_center 什么都不做……
@user13317 使用 justify-content: center;而不是 text-align:center;