Bootstrap 3垂直對齊

Question

使用Bootstrap 3，我正在努力解決DIV的垂直對齊問題。 我對所有不同的CSS DISPLAY類型完全迷失了。

我有一段代碼，其中包含響應式圖像，可以顯示整個視口。 頁面中央顯示一個TITLE。

這是一個遺留代碼。 您可以在CODEPEN中找到它： http ://codepen.io/ocleyman/pen/xGKYap

現在，我想添加另一個DIV，其內容將顯示在圖像的底部（視口的底部）。 我嘗試將DIV與一些CSS一起添加到底部。 但是不能成功。 我認為BOOTSTRAP正在浮動元素。 所以我嘗試了像這樣的css：

display: inline-block;
vertical-align: bottom;
float: none;

我敢肯定我濫用顯示類型。

這是CODEPEN的嘗試： http ://codepen.io/ocleyman/pen/PwRBdx

Answer 1

引導程序邏輯通常是這樣的：container-row-col。 首先，刪除不需要的額外標記：

<header class="intro container" id="intro">
<div class="intro-title row">
  <div class="col-md-8 col-md-offset-2 frame">
                <h1>TITLE</h1>
            </div>
</div>
 <div class="intro-bottom row">
<div class="col-md-8 col-md-offset-2 frame">
                <h2>bottom</h2>
            </div>
</div>
</header>

CSS還需要一些清理和補充：

.intro .intro-title{
  margin-bottom: 10px;
}

.intro .intro-bottom{
  position: relative;
  bottom: -60%;
}

也許我誤解了您的意圖，但是您可以通過相對的定位來獲得想要的東西。

Answer 2

這里的問題是引導程序不是問題。

這是沒有引導程序的解決方案示例。

http://codepen.io/anon/pen/VLZQNV

集中文字使用

.class{
top:50%;
position:absolute;
transform:translateY(-50%);
}

到底部文字

.class{
position:absolute;
bottom:0;
}

這兩個語句都需要在相對塊中使用。 來自ie9的作品。