Question

使用Boostrap 3，我正在努力与DIV的vectical对齐。我完全迷失了所有不同的css DISPLAY类型。

我有一段带有响应图像的代码，可以使用完整的视口。页面中央显示一个TITLE。

这是一个leagacy代码。你可以在CODEPEN找到它： http://codepen.io/ocleyman/pen/xGKYap

现在我想添加另一个DIV，其内容将显示在图像的底部（视口底部）。我尝试将DIV与一些CSS一起添加到底部。但无法成功。我认为BOOSTRAP是浮动元素。所以我尝试用这样的css剪切：

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

我很确定我误用了显示器类型。

以下是CODEPEN尝试： http://codepen.io/ocleyman/pen/PwRBdx

任何提示或帮助都将不胜感激。

Answer 1

Bootstrap逻辑通常采用这种方式：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

这里的问题是它对引导程序没有问题。

这里是没有bootstrap的解决方案示例。

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

以文字为中心

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

到底部文字

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

两个语句都需要在相对块中使用。从ie9开始。

BOOTSTRAP 3垂直对齐

2 个答案: