將div中的文本以bootstrap3引導至bootom

我想將我的標題與我的容器底部對齊，在使用引導程序的wordpress站點中，如何執行此操作？將div中的文本以bootstrap3引導至bootom

我試着用積極的和相對定位打不過我越來越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; 
}

我得到這個結果：

enter image description here

來源

2015-01-10 pevoje

應該是'position：absolute'和父'position：relative' –

你只是轉換相對於絕對

.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和改變元素

來源

2015-01-10 12:44:51 khodadadi

變化的位置，這一點，也許底部的值應該是適合你的標題。所以你可以根據你的標題的高度來設置它。注意width:100%，因爲absolute沒有流量。所以你必須設置它！

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

來源

2015-01-10 12:44:58

我想通了正確的組合：

.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標題類中的「左」的屬性一直在推動的股利一路向左:)

來源

2015-01-10 18:30:19 pevoje

這裏有一個小小的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>

來源

2015-01-12 00:00:43 Denise

將div中的文本以bootstrap3引導至bootom

回答

相關問題