Twitter Bootstrap旋转木马箭头不是垂直居中依赖于glyphicon [英] Twitter Bootstrap carousel arrows not centered vertically depending on glyphicon

问题描述

我使用默认箭头创建了一个Twitter Bootstrap轮播（glyphicon-chevron-left和glyphicon-chevron-right）。

I created a Twitter Bootstrap carousel with the default arrows (glyphicon-chevron-left and glyphicon-chevron-right). These are nicely centered vertically in the carousel.

我用两个不同的图标来替换这些图标，即glyphicon-circle-arrow-left和glyphicon-circle-arrow-对。但是由于某些原因，当只更换图标时，它们突然不再垂直居中。我不知道为什么。

I though about replacing these icons with two different icons, namely glyphicon-circle-arrow-left and glyphicon-circle-arrow-right. But for some reason, when only replacing the icons, they are suddenly not centered vertically anymore. I can't find out why.

这是一个很好的中心版本（ http://jsfiddle.net/AdF6b ）：

This is the nicely centered version (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>

为什么第二个版本中的箭头不居中？唯一的区别是glyphicon类。

Why are the arrows in the second version not centered? The only difference is the glyphicon classes.

推荐答案

我不得不承认，这个问题有点奇怪。在Twitter Bootstrap中，有以下特定的行：

I have to admit, this issue is a bit strange. In Twitter Bootstrap, there are this particular lines:

.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 所以你可以简单地添加它，一切都应该很好：

Like you see, there is no .glyphicon-circle-arrow-left and no .glyphicon-circle-arrow-right class specified. So you can simply add it and everything should work fine:

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

这篇关于Twitter Bootstrap旋转木马箭头不是垂直居中依赖于glyphicon的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！