Html 推特引导旋转箭头未垂直居中，具体取决于图标

我创建了一个带有默认箭头的Twitter引导旋转木马（glyphicon V形左箭头和glyphicon V形右箭头）。它们在旋转木马中垂直居中

我想用两个不同的图标替换这些图标，即glyphicon圆圈箭头左和glyphicon圆圈箭头右。但由于某些原因，当只替换图标时，它们突然不再垂直居中。我不知道为什么

这是居中的版本（）：

幻灯片1
这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任，是我的责任

幻灯片2
这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任，是我的责任

幻灯片3
这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任，是我的责任

非中心版本（）：

幻灯片1
这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任，是我的责任

幻灯片2
这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任，是我的责任

幻灯片3
这是我的责任，是我的责任，是我的责任，是我的责任，是我的责任，是我的责任

---

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

我必须承认，这个问题有点奇怪。在Twitter引导中，有以下几行代码：

.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圆圈箭头左
和
.glyphicon圆圈箭头右
类。因此，您可以简单地添加它，一切都应该正常工作：

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

我同意Flixer，但也许最好不要编辑原始的引导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;
}

在您自己的项目css文件中。这可以避免升级到新引导版本时出现问题
 我使用的是Bootstrap 3.3.4，如果您将类icon prev（左箭头）和icon next添加到您的（glyphicon），您可以使用任何您喜欢的glyphicon

我将我的glyphicon从默认的.glyphicon雪佛龙左更改为使用.glyphicon菜单左和右



这不起作用。事实上，使用icon prev和icon next将覆盖您选择的glyphicon。或者只是
.carousel控件span{…}
.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;
}

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