使用bootstrap 3将div中的文本与底部对齐

Question

我想把我的tittle放到容器的底部，在我使用bootstrap的wordpress网站上，怎么做？

我尝试使用正面和相对位置进行比赛，但是我将txt与所有lef或顶部对齐..

这是我的代码：

<div class="container-fluid pre-content-banner">
    <div class="container">
    <div class="intro-title bottom-aligned-text">
        <h1><?php the_title(); ?></h1>
    </div>  
    </div>
    </div> <!-- end container fluid -->

CSS：

.pre-content-banner {
    height: 300px;
    background: white url("images/businessppl-bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}

.intro-title {
    position: relative;
    bottom: 0;
    left: 0;
}

我得到了这个结果：

Answer 1

你只需要转换为绝对值

.pre-content-banner {
    height: 300px;
    background: white url("images/businessppl-bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}

.intro-title {
    position: absolute;
    bottom: 0;
    left: 0;
}
.container{
    margin-bottom:30px /*this margin == height of h1*/
}

或使用javascript并更改元素的位置

Answer 2

更改为此，也许底部的值应该适合您的标题。所以你可以根据你的标题高度设置它。请注意width:100%，因为absolute离开了流程。所以你必须设置它！

.intro-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
}

Answer 3

我找到了合适的组合：

.pre-content-banner {
    height: 300px;
    background: white url("images/businessppl-bg.jpg") no-repeat center;
    background-size: cover;
    position: relative;
}

.intro-title {
    position: absolute;
    bottom: 0;
}

在.intro-title类中，“left”属性一直将div推到左边：）

Answer 4

这是一个小小的CSS技巧，允许您将内容与其容器的底部对齐，其方式与vertical-align =“bottom”在基于表格的布局中的工作方式类似。 http://codepen.io/dfrierson2/pen/myRaNy

.container-fluid, .pre-content-banner {
    height: 150px;
    width:900px;
    border:1px solid #000;
    position: relative;
}
.container {
    position: absolute;
    bottom: 0px;   
    text-align: center;
    border: 1px solid red;


}
#intro-title bottom-aligned-text{
    font-size: 20px;
    font-weight: normal;
    margin:0;
}



<div class="container-fluid pre-content-banner">
    <div class="container">
         <h1 id="intro-title bottom-aligned-text">Test Title</h1>

    </div>

</div>