如何使用引导程序在英雄图像中制作文本中心

Question

我正在尝试使用 Bootstrap 对以下设计进行建模。

目前，我找到了一种使用 bootstrap CSS 中的“carousel-caption”类来执行此操作的方法，但它似乎没有按预期工作。

html 看起来像这样：

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <img src="http://placehold.it/1000x550" alt="test" class="img-responsive">
        <div class="carousel-caption">
          <h1>Text word1 word2 superlative.</h1>
        </div>
      </div>
    </div>
  </div>

你可以在https://jsfiddle.net/3vf5gog4/2/上看到一个例子

这会产生一个标题，但图像不会拉伸，标题也没有垂直居中，我不知道应该如何在当前轮播标题下添加另一个标题

Answer 1

这是引导程序可以绊倒你的事情之一。 所以.container-fluid类在它周围有一个填充，其他网格元素也是如此，这会导致拉伸问题。 CSS 中垂直居中的元素可能会很痛苦，我见过一种很好的方法，但我通常只关注百分比并添加一些百分比

我已经编辑了您的小提琴以取出引导程序填充并将该文本居中。 https://jsfiddle.net/3vf5gog4/5/

Answer 2

试试这个：

.carousel-caption{
  postion:absolute;
  top : 20%;
}