Manu Manu - 4 months ago 31
CSS Question

Aligning bootstrap carousel controls middle vertical

I am using a Bootstrap carousel and I would like to vertically center the chevron arrows I am using to slide back and forward in the carousel. Currently they are horizontally centered, but aligned to the top.

Code:

<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

You can use this CSS to center them vertically and align 20px from left and right of your carousel.

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