如何使用bootstrap在Hero图像中创建文本中心

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中的垂直居中元素可能是one good method我看到的痛苦，但我通常会只看眼球百分比并增加一些前提

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

Answer 2

尝试一下：

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