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/

Answer 2

对内容填充使用绝对位置，对主div＃home-section使用相对位置

#home-section{
   position: relative;
}

.home-content{
   position: absolute;
   bottom:10px;
   right:10px;
}

10px是基本设置，您可以将.home-content的底部和右侧调整为所需的任何像素。

Answer 3

尝试一下-

#home-section h1{
    bottom:0;
    position:absolute;
}

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

3 个答案: