多行傳送帶標題爲引導

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