Bootstrap 3将文本对齐到Div的底部答案

【问题标题】：Bootstrap 3 Align Text To Bottom of DivBootstrap 3将文本对齐到Div的底部
【发布时间】：2014-08-23 17:18:33
【问题描述】：

我正在尝试在 Bootstrap 中进行设置，看起来像这样，其中我的文本与图像底部对齐：

================================================
|                                              |
|    ####################                      |
|    ##THIS IS AN IMAGE##                      |
|    ####################   ...And some text!  |
|                                              |
================================================

所以我尝试了这个：

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

但我最终得到的东西看起来更像这样，文本是顶部对齐的：

================================================
|                                              |
|    ####################  ...And some text!   |
|    ##THIS IS AN IMAGE##                      |
|    ####################                      |
|                                              |
================================================

我尝试了一些定位技巧来让它发挥作用，但是当我这样做时，它打破了 Bootstrap 的移动优先性。当折叠到手机大小时，我需要它来捕捉这个：

==========================
|                        |
|  ####################  |
|  ##THIS IS AN IMAGE##  |
|  ####################  |
|                        |
|   ...And some text!    |
|                        |
==========================

所以把它当成一张桌子真的不是一种选择。

编辑：这是一个小提琴，由 cmets 的 Joseph Marikle 提供：D http://jsfiddle.net/6WvUY/1/

【问题讨论】：

对于那些试图尝试这个的人来说，这里有一个小提琴：jsfiddle.net/6WvUY/1
你的图片有固定高度吗？
这个问题真的很老，但在 Bootsrap 4 中，现在有 align-bottom

标签： css twitter-bootstrap-3

【解决方案1】：

我认为最好的办法是结合使用绝对定位和相对定位。

这是一个小提琴：http://jsfiddle.net/PKVza/2/

给定你的 html：

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

使用以下 CSS：

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

编辑 - 修复 CSS 和 JSFiddle 以实现移动响应并将 ID 更改为类。

【讨论】：

我更喜欢类而不是 id 这样的事情，但这也是我能想到的最好的。
我也同意 @JosephMarikle 的观点，即类比 ID 更好，因为它可以在页面上重复使用。
.row 需要全局化有什么原因吗？我在定义中添加了一个额外的类，例如.bottom-align.row，因此它只影响该行，而不是页面上的所有行。
@redfox05 -- 这没有充分的理由。如果您不想将其应用于所有 .row 的解决方案，那么您的解决方案是一个很好的解决方案

【解决方案2】：

我从其他 SO 问题中收集了一些想法（主要来自 here 和 this css page）

Fiddle

这个想法是使用相对和绝对定位将你的线移动到底部：

@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}

display:flex 选项目前是使 div 与其父级大小相同的解决方案。另一方面，这通过添加col-sx-12 类打破了在小型设备上自动换行的引导可能性。（这就是需要媒体查询的原因）

【讨论】：

【解决方案3】：

你可以这样做：

CSS：

#container {
    height:175px;
}

#container h3{
    position:absolute;
    bottom:0;
    left:0;
}

然后在 HTML 中：

<div class="row">
    <div class="col-sm-6">
        <img src="//placehold.it/600x300" alt="Logo" />
    </div>
    <div id="container" class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

编辑：添加

【讨论】：

【解决方案4】：

这是另一个解决方案：http://jsfiddle.net/6WvUY/7/。

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
        </div>
        <div class="col-sm-6">
            <h3>Some Text</h3>
        </div>
    </div>
</div>

CSS：

.row {
    display: table;
}

.row > div {
    float: none;
    display: table-cell;
}

【讨论】：

【解决方案5】：

我测试过的最简单的方法是添加<br>，如下所示：

<div class="col-sm-6">
    <br><h3><p class="text-center">Some Text</p></h3>
</div>

唯一的问题是当屏幕变小并堆叠时会生成一个额外的换行符（由 <br> 生成）。但它又快又简单。

【讨论】：

这是一个糟糕的解决方案，如果高度不完全是一条线，它将无法正确对齐。