html - 如何使用 bootstrap 3 将文本对齐到背景图像的底部

Question

查看此 gist

我想将文字移到图片底部，这样更容易阅读。

但我还没有想出如何做到这一点。如果我只是在顶部添加边距，那么在移动设备上，边距就太多了。

<div id="home-section" class="image-bg vertical-align">
    <div class="container">
        <div class="home-content padding ">

            <h1 class="jumbo text-center"><em>This is the headline</em></h1>    
            <div class="button text-center">
                <a href="/signup"" onclick="log('click','register','home-section')" class="btn btn-primary btn-animated">Start Free Trail</a>
            </div>
    </div>
</div><!--/#home-section-->

CSS

#home-section {
background-color:#7e90a2;
background-image:url(https://traken.net/images/bg/home-bg-3.jpg);
color:#fff;
height:900px;

Answer 1

试试这个

<div id="home-section" class="image-bg vertical-align">
<div class="container">
    <div class="home-content padding ">

        <h1 class="jumbo text-center"><em>This is the headline</em></h1>    
        <div class="button text-center">
            <a href="/signup"" onclick="log('click','register','home-section')" class="btn btn-primary btn-animated">Start Free Trail</a>
        </div>
</div>
</div><!--/#home-section-->

#home-section {
   background-color:#7e90a2;
   background-image:url(https://traken.net/images/bg/home-bg-3.jpg);
   color:#fff;
   height:900px;
   position:relative;
}
div.home-content {
  position:absolute;
  bottom:10px;
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
}

jsfiddle -> https://jsfiddle.net/aq9Laaew/145890/