CSS Bootstrap 3 将文本与 Div 底部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24539197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Align Text To Bottom of Div
提问by Pharylon
I'm trying to get a setup in Bootstrap that would look something like this, where I have text aligned with the bottom of an image:
我正在尝试在 Bootstrap 中设置一个看起来像这样的设置，其中我的文本与图像的底部对齐：
================================================
| |
| #################### |
| ##THIS IS AN IMAGE## |
| #################### ...And some text! |
| |
================================================
So I tried this:
所以我试过这个：
<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>
But I end up with something that looks more like this, where the text is top-aligned:
但我最终得到的东西看起来更像这样，文本顶部对齐：
================================================
| |
| #################### ...And some text! |
| ##THIS IS AN IMAGE## |
| #################### |
| |
================================================
I've tried a few positioning tricks to get it to work, but when I do that, it breaks the mobile-firstness of Bootstrap. When collapsed down to phone-size, I need it to snap to this:
我尝试了一些定位技巧来让它工作，但是当我这样做时，它打破了 Bootstrap 的移动优先性。当折叠到手机大小时，我需要它捕捉到这个：
==========================
| |
| #################### |
| ##THIS IS AN IMAGE## |
| #################### |
| |
| ...And some text! |
| |
==========================
So doing it as a table really isn't an option.
所以把它当作一张桌子真的不是一个选择。
EDIT:Here's a fiddle, courtesy of Joseph Marikle in the comments :D http://jsfiddle.net/6WvUY/1/
编辑：这是一个小提琴，由 Joseph Marikle 在评论中提供：D http://jsfiddle.net/6WvUY/1/
回答by Cody Reichert
I think your best bet would be to use a combination of absolute and relative positioning.
我认为最好的办法是结合使用绝对定位和相对定位。
Here's a fiddle: http://jsfiddle.net/PKVza/2/
这是一个小提琴：http: //jsfiddle.net/PKVza/2/
given your html:
给定你的 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>
use the following CSS:
使用以下 CSS：
@media (min-width: 768px ) {
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
}
EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class.
编辑 - 修复了移动响应的 CSS 和 JSFiddle，并将 ID 更改为一个类。
回答by Brandon Nguyen
You can do this:
你可以这样做：
CSS:
CSS：
#container {
height:175px;
}
#container h3{
position:absolute;
bottom:0;
left:0;
}
Then in HTML:
然后在 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>
EDIT: add the <
编辑：添加 <
回答by Daniel
I collected some ideas from other SO question (largely from hereand this css page)
我从其他 SO 问题中收集了一些想法（主要来自这里和这个 css 页面）
The idea is to use relative and absolute positioning to move your line to the bottom:
这个想法是使用相对和绝对定位将您的线移动到底部：
@media (min-width: 768px ) {
.row {
position: relative;
}
#bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}}
The display:flexoption is at the moment a solution to make the div get the same size as its parent. This breaks on the other hand the bootstrap possibilities to auto-linebreak on small devices by adding col-sx-12class. (This is why the media query is needed)
该display:flex选项目前是使 div 获得与其父级相同大小的解决方案。另一方面，这打破了通过添加col-sx-12类在小型设备上自动换行的引导可能性。（这就是为什么需要媒体查询的原因）
回答by DRD
Here's another solution: http://jsfiddle.net/6WvUY/7/.
这是另一个解决方案：http: //jsfiddle.net/6WvUY/7/。
HTML:
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:
CSS：
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
回答by Jason
The easiest way I have tested just add a <br>as in the following:
我测试过的最简单的方法只是添加一个<br>，如下所示：
<div class="col-sm-6">
<br><h3><p class="text-center">Some Text</p></h3>
</div>
The only problem is that a extra line break (generated by that <br>) is generated when the screen gets smaller and it stacks. But it is quick and simple.
唯一的问题是<br>当屏幕变小并堆叠时会生成一个额外的换行符（由那个生成）。但它快速而简单。
