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

Question

我正在使用 Twitter Bootstrap 3.1.1。

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

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

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

这是全尺寸的样子:

下面是屏幕尺寸较小时的样子:

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

Answer 1

将以下代码添加到您的 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;
}