Bootstrap 的多行轮播标题

Question

我使用 Carousel Container 创建了一个页面标题，其中文本居中（水平和垂直），因为这是将文本居中放置在图像上的最简单方法 - 参考图像。

我的客户希望我在文本上方和下方添加一条水平线，如下图所示，但我不确定实现这一点的最佳方法 - 鉴于所有内容仍需要居中且必须居中反应灵敏。

这是我的 HTML 代码（不包括导航栏，作为它的引导程序）；

<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
        <img src="images/community-group.jpg" alt="" class="center-block img-responsive" style="opacity: 0.8;">
          <div class="carousel-caption">
            <div class="text-center full-width"><h1>Contact Us </h1></div>
          </div>
        </div>
      </div>
    </div>
  </div>

这是用于处理 Carousel 和 Carousel Caption 并确保它们居中的当前 CSS：

.full-width {
    width: 100%;
}

h1 {
  color: #ffffff;
  font-size: 400%;
  text-shadow: 2px 2px #9e9e9e;
}

.carousel-caption {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    vertical-align: middle;
}

Answer 1

<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">

        <div class="carousel-caption">
          <div class="row">
            <div class="col-sm-4">
              <div>
                <div class="col-sm-4">
                  <div class="text-center full-width">
                    <hr/>
                    <h1>Contact Us </h1>
                    <hr/>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

简单的方法：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">

        <div class="carousel-caption">
          <div class="row">
            <div class="col-sm-4"><div>
            <div class="col-sm-4">
              <div class="text-center full-width">
                <hr/>
                <h1>Contact Us </h1>
                <hr/>
              </div>
            </div>
            <div class="col-sm-4"><div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以将其他类添加到轮播并更改此轮播标题样式，这样您就有了原始轮播标题和您的轮播标题。 只需将 top 更改为 50% 和 margin-top = 标题高度 / 2

.verticalCarousel .carousel-caption {
   bottom:inherit;
   top: 50%;
   margin-top:-150px;
   border-top:1px solid #fff;
   border-bottom:1px solid #fff;
}