对齐引导传送带控制中间垂直

Question

我正在使用Bootstrap传送带，并且我想垂直居中使用在传送带上前后滑动的V形箭头。目前它们是水平居中的，但是与顶部对齐。

代码：

<div class="row"> 
    <div class="col-md-12"> 
    <div id="Carousel" class="carousel slide"> 

     <ol class="carousel-indicators"> 
     <li data-target="#Carousel" data-slide-to="0" class="active"></li> 
     <li data-target="#Carousel" data-slide-to="1"></li> 
     <li data-target="#Carousel" data-slide-to="2"></li> 
     </ol> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 

     <div class="item active"> 
      <div class="row"> 
      <div class="text-center"> 
       <h1>Header</h1> 
       <p>Content</p> 
      </div> 
      </div><!--.row--> 
     </div><!--.item--> 
     </div> 
     <a data-slide="prev" data-target="#Carousel" href="javascript:;" class="left carousel-control"><i 
     class="fa fa-chevron-left fa-2x" aria-hidden="true"></i></a> 
     <a data-slide="next" data-target="#Carousel" href="javascript:;" class="right carousel-control"><i 
     class="fa fa-chevron-right fa-2x" aria-hidden="true"></i></a> 
    </div><!--.Carousel--> 
    </div> 
</div> 

Answer 1

你可以使用这个CSS垂直居中他们和左和你的旋转木马的右对齐20px。

.carousel .left > i, 
.carousel .right > i { 
    position: absolute; 
    left: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.carousel .right > i { 
    left: auto; 
    right: 20px; 
}