对齐引导轮播控件中间垂直

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