多行传送带标题为引导

Question

我使用旋转木马容器创建具有文本一个页标题为中心（水平&垂直地），因为它是居中文本在图像的最简单的方法 - 参照图像。

我的客户要我加一条水平线上方&下面的文字，因为它低于这个形象做了，但是我不知道在实现这一目标的最佳方式 - 放弃一切仍需要集中&它必须有响应。

这是我的HTML代码（不包括Navbar，作为它的Bootstrap）;

<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> 

下面是用于处理旋转木马&旋转木马标题，并确保他们为中心的当前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

您可以添加其他类旋转木马和改变这种旋转木马标题样式，白衣这一点，你有原单转盘标题和你的旋转木马标题。 只要改变顶部50％和边距=标题高度/ 2

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