html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon

概述我使用默认箭头(glyphicon-chevron-left和glyphicon-chevron-right)创建了一个Twitter Bootstrap轮播.这些很好地在旋转木马中垂直居中. 我想用两个不同的图标替换这些图标,即glyphicon-circle-arrow-left和glyphicon-circle-arrow-right.但由于某种原因,当只更换图标时,它们突然不再垂直居中.我 我使用默认箭头(glyphicon-chevron-left和glyphicon-chevron-right)创建了一个Twitter bootstrap轮播.这些很好地在旋转木马中垂直居中.

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

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

<div >      <div  ID="foto-carousel" >        <ol >          <li data-target="#foto-carousel" data-slIDe-to="0" ></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 >          <div >            <img src="http://lorempixel.com/g/1600/800/city/1">            <div >              <h4>SlIDe 1</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit...</p>            </div>          </div>          <div >            <img src="http://lorempixel.com/g/1600/800/city/3">            <div >              <h4>SlIDe 2</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit...</p>            </div>          </div>          <div >            <img src="http://lorempixel.com/g/1600/800/city/5">            <div >              <h4>SlIDe 3</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit...</p>            </div>          </div>        </div>        <a  href="#foto-carousel" data-slIDe="prev">          <span ></span> -->        </a>        <a  href="#foto-carousel" data-slIDe="next">          <span ></span>        </a>      </div>

非中心版(http://jsfiddle.net/AdF6b/1/)：

<div >      <div  ID="foto-carousel" >        <ol >          <li data-target="#foto-carousel" data-slIDe-to="0" ></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 >          <div >            <img src="http://lorempixel.com/g/1600/800/city/1">            <div >              <h4>SlIDe 1</h4>              <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit...</p>            </div>          </div>        </div>        <a  href="#foto-carousel" data-slIDe="prev">          <span ></span>        </a>        <a  href="#foto-carousel" data-slIDe="next">          <span ></span>        </a>      </div>

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

解决方法 我不得不承认,这个问题有点奇怪.在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,.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;}

总结

以上是内存溢出为你收集整理的html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon全部内容，希望文章能够帮你解决html – Twitter Bootstrap轮播箭头不垂直居中,具体取决于glyphicon所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。