twitter-bootstrap Twitter Bootstrap 轮播箭头不垂直居中取决于字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21588819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap carousel arrows not centered vertically depending on glyphicon
提问by Tohnmeister
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-chevron-left 和 glyphicon-chevron-right）的 Twitter Bootstrap 轮播。这些在旋转木马中很好地垂直居中。
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.
我想用两个不同的图标替换这些图标，即 glyphicon-circle-arrow-left 和 glyphicon-circle-arrow-right。但是由于某种原因，当只替换图标时，它们突然不再垂直居中了。我不知道为什么。
This is the nicely centered version (http://jsfiddle.net/AdF6b):
这是很好的居中版本（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>
The non centered version (http://jsfiddle.net/AdF6b/1/):
非居中版本（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>
Why are the arrows in the second version not centered? The only difference is the glyphicon classes.
为什么第二个版本中的箭头没有居中？唯一的区别是字形类。
回答by Flixer
I have to admit, this issue is a bit strange. In Twitter Bootstrap, there are this particular lines:
不得不承认，这个问题有点奇怪。在 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;
}
Like you see, there is no .glyphicon-circle-arrow-leftand no .glyphicon-circle-arrow-rightclass specified. So you can simply add it and everything should work fine:
如您所见，没有.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;
}
回答by Baxny
I'm using Bootstrap 3.3.4 and you can use what ever glyphicon you like if you add the class icon-prev(left arrow) and icon-nextto your (glyphicon).
我正在使用 Bootstrap 3.3.4，如果您在您的（字形）旁边添加类icon-prev（左箭头）和icon-next，您可以使用任何您喜欢的字形。
I changed my glyphicon from the default .glyphicon-chevron-left to use .glyphicon-menu-left and right.
我将我的字形从默认的 .glyphicon-chevron-left 更改为使用 .glyphicon-menu-left 和 right。
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-menu-left icon-prev'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-menu-right icon-next'></span>
</a>回答by HoTseChu
I agree with Flixer, but perhaps it would be better not to edit the original Bootstrap css files. Instead, you can put that lines:
我同意 Flixer，但也许最好不要编辑原始的 Bootstrap css 文件。相反，您可以放置以下几行：
/* Bootstrap: Center carousel arrow icons */
.carousel-control .glyphicon-arrow-left,
.carousel-control .glyphicon-arrow-right {
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
in your own project css file. This may avoid problems when upgrading to new Bootstrap versions.
在您自己的项目 css 文件中。这可以避免在升级到新的 Bootstrap 版本时出现问题。
