在引導程序輪播中垂直對齊文本

我正在嘗試使用僅使用文本的引導程序輪播。我需要讓文字在中間對齊。然而，文本往往在左邊，而不是在中間對齊，因爲它應該是。我試圖得到這個修復。在引導程序輪播中垂直對齊文本

.carousel{ 
 
    display:table; 
 
    width:100%; 
 
} 
 
.carousel-content { 
 
    color:black; 
 
    position:flex; 
 
\t width:inherit; 
 
\t text-align:center; 
 
    height:200px; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="carousel-example" class="carousel slide" data-ride="carousel"> 
 
    <!-- Wrapper for slides --> 
 
    <div class="row"> 
 
     <div class="col-xs-offset-3 col-xs-6"> 
 
      <div class="carousel-inner"> 
 
       <div class="item active"> 
 
        <div class="carousel-content"> 
 
         <div> 
 
          <h3>#1</h3> 
 
          <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="carousel-content"> 
 
         <div> 
 
          <h3>#2</h3> 
 
          <p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="item"> 
 
        <div class="carousel-content"> 
 
         <div> 
 
          <h3>#3</h3>        
 
          <p>This is the third item.</p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left"></span> 
 
    </a> 
 
<a class="right carousel-control" href="#carousel-example" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right"></span> 
 
    </a> 
 

 
</div> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

來源

2016-12-04 M Ismail

試試這個

.carousel-content { 
    display: block; 
}

來源

2016-12-05 11:57:00

我已經更新的小提琴固定。檢查它。 Fiddleenter code here

來源

2016-12-05 13:43:11

在引導程序輪播中垂直對齊文本

回答

相關問題