3

是否可以将 Bootstrap 3.0 中的字幕垂直居中？

这是它现在看起来的截图http://i.imgur.com/OJKaXwv.png

所以标题，所有的文字，都在图片的中间？这是我的 HTML 代码：

<div id="myCarousel" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/slide01.jpg" alt="First slide">
        <div class="carousel-caption">
          <h1>Welcome</h1>
          <p>Here you'll see a great text!</p>
        </div>
    </div>
    <div class="item">
      <img src="images/slide02.jpg" alt="Second slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>Great Caption</h1>
          <p>So, this will be a great text as well.</p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="images/slide03.jpg" alt="Third slide">
      <div class="container">
        <div class="carousel-caption">
          <h1>One more</h1>
          <p>Once again you'll see a great text here, seriously it'll be awesome!</p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

我的 CSS 文件非常丰富（没有改变）：

.carousel {
  margin-bottom: 60px;
 /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
  margin-top: -20px;
}

/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  min-height: 200px;
  background-color: #777;
}
.carousel-inner > .item > img {
  width: 100%;
  display: block;
  max-width: 100%;
}

我只是无法让它工作，已经尝试过：http://stackoverflow.com/questions/16887484/positioning-and-styling-of-twitter-bootstrap-carousel-image-captions/19623418#19623418 , http://stackoverflow.com/questions/19070256/center-content-vertically-in-bootstrap3-carousel-with-flexbox , http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ , http://jsfiddle.net/pYjnF/1/

他们都没有工作，他们只是没有把标题放在中心。

我现在每天都在集中文本，不知何故有这样的印象，那就是它非常容易，但我就是不知道该怎么做。

4

1 回答 1

2

尝试在您的 CSS 中添加此代码：

.carousel-caption {
  margin-bottom: 50px;
}

根据您的图像大小更改该 px 值。

于 2013-10-28T12:25:52.583 回答