html - Twitter Bootstrap 旋转木马箭头不垂直居中取决于字形

Question

我创建了一个带有默认箭头(glyphicon-chevron-left 和 glyphicon-chevron-right)的 Twitter Bootstrap 旋转木马。这些在轮播中很好地垂直居中。

我想用两个不同的图标替换这些图标，即 glyphicon-circle-arrow-left 和 glyphicon-circle-arrow-right。但是由于某种原因，当只替换图标时，它们突然不再垂直居中了。我找不到原因。

这是很好的居中版本(http://jsfiddle.net/AdF6b):

    <div class="row">
      <div  id="foto-carousel" class="carousel slide">
        <ol class="carousel-indicators">
          <li data-target="#foto-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#foto-carousel" data-slide-to="1"></li>
          <li data-target="#foto-carousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active item">
            <img src="http://lorempixel.com/g/1600/800/city/1">
            <div class="carousel-caption">
              <h4>Slide 1</h4>
              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
          </div>
          <div class="item">
            <img src="http://lorempixel.com/g/1600/800/city/3">
            <div class="carousel-caption">
              <h4>Slide 2</h4>
              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
          </div>
          <div class="item">
            <img src="http://lorempixel.com/g/1600/800/city/5">
            <div class="carousel-caption">
              <h4>Slide 3</h4>
              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#foto-carousel" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span> -->
        </a>
        <a class="right carousel-control" href="#foto-carousel" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
      </div>

非居中版本(http://jsfiddle.net/AdF6b/1/):

<div class="row">
      <div  id="foto-carousel" class="carousel slide">
        <ol class="carousel-indicators">
          <li data-target="#foto-carousel" data-slide-to="0" class="active"></li>
          <li data-target="#foto-carousel" data-slide-to="1"></li>
          <li data-target="#foto-carousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
        <div class="carousel-inner">
          <div class="active item">
            <img src="http://lorempixel.com/g/1600/800/city/1">
            <div class="carousel-caption">
              <h4>Slide 1</h4>
              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
          </div>
          <div class="item">
            <img src="http://lorempixel.com/g/1600/800/city/3">
            <div class="carousel-caption">
              <h4>Slide 2</h4>
              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
          </div>
          <div class="item">
            <img src="http://lorempixel.com/g/1600/800/city/5">
            <div class="carousel-caption">
              <h4>Slide 3</h4>
              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#foto-carousel" data-slide="prev">
          <span class="glyphicon glyphicon-circle-arrow-left"></span>
        </a>
        <a class="right carousel-control" href="#foto-carousel" data-slide="next">
          <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
      </div>

为什么第二个版本中的箭头没有居中？唯一的区别是字形类。

Answer 1

不得不承认，这个问题有点奇怪。在 Twitter Bootstrap 中，有这样几行:

.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}

如您所见，没有指定 .glyphicon-circle-arrow-left 和 .glyphicon-circle-arrow-right 类。所以你可以简单地添加它，一切都应该正常工作:

.carousel-control .icon-prev, .carousel-control .icon-next, 
.carousel-control .glyphicon-chevron-left, .carousel-control 
.glyphicon-chevron-right, .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-left, 
.carousel-control .glyphicon-circle-arrow-right {
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}