【问题标题】:Allign text in a div to bootom with bootstrap3使用引导程序 3 将 div 中的文本与底部对齐
【发布时间】: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

标签: html css wordpress twitter-bootstrap-3


【解决方案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>
        

        【讨论】:

          猜你喜欢
          • 2013-11-25
          • 2013-06-11
          • 2014-03-09
          • 2019-01-22
          • 2014-08-23
          • 2016-10-31
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多