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

看到这个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;

}

最佳答案

尝试这个

<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/