Bootstrap轮播按钮未在较小的屏幕上垂直对齐

Question

我正在使用 Twitter Bootstrap 3.1.1 。

源代码：http://jsfiddle.net/iglvzx/7g7dy/

我在我的网站顶部添加carousel，我选择不在每张幻灯片上使用指示点。 （我省略了<ol class="carousel-indicators">元素）

我遇到的问题是下一个和上一个按钮在较小的屏幕上没有垂直居中。

以下是完整尺寸的显示方式：

以下是屏幕尺寸较小时的外观：

如何让下一个和上一个按钮/图标在较小的屏幕上垂直对齐？屏幕越小，按钮越向南移动。

Answer 1

这也发生在http://getbootstrap.com上。看起来他们设置top: 50%但不是负边距等于人字形高度的一半（就像他们在桌面上做的那样）。

在Bootstrap的GitHub页面上将此问题作为一个问题提供更好的服务：https://github.com/twbs/bootstrap/issues

如果你现在需要一个解决方法，我会为.carousel-control .glyphicon编写一个规则并给它一个上边距-1/2（x），其中x是雪佛龙的高度。移动设备应该是8px左右。

@media screen and (max-width: 768px) {
  .carousel-control .glyphicon { margin-top: -8px; }
}

Answer 2

将以下代码添加到您的css文件中，并根据需要更改font-size，line-height和margin-top。只需将font-size和line-height相等，margin-top必须是其大小的一半。

http://jsfiddle.net/7g7dy/2/

.carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  font-size: 24px;
  line-height: 24px;
  margin-top: -12px;
}