使用引导程序 3 将 div 中的文本与底部对齐

Posted 2023-03-06

【中文标题】使用引导程序 3 将 div 中的文本与底部对齐

【英文标题】：Allign text in a div to bootom with bootstrap3

【发布时间】：2015-03-08 16:54:00

【问题描述】：

我想在使用引导程序的 wordpress 网站中将我的标题与容器底部对齐，该怎么做？

我尝试使用正向和相对定位，但我让 txt 与所有左侧或最顶部对齐..

这是我的代码：

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

我得到了这个结果：

【问题讨论】：

应该是 position:absolute 和父 position:relative

【参考方案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改变元素的位置

【参考方案2】：

改成这个，也许底部的值应该适合你的标题。所以你可以根据你的标题的高度来设置它。注意width:100%，因为absolute出流量了。所以一定要设置！

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

【参考方案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 一直推到左侧:)

【参考方案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>