如何垂直对齐Twitter Bootstrap Carousel的箭头？

Question

正如您在转盘上看到的那样，有一个向右或向左滑动的箭头。

  

http://twitter.github.com/bootstrap/javascript.html#carousel

我不使用字幕。因此，我希望它是垂直居中的。 现在就像这样

如何将箭头垂直居中？

Answer 1

在布局中最终落地的元素可能会受到许多因素的影响。没有看到你的标记，你的问题的具体解决方案是不可能的。

但是，如果您知道旋转木马的高度将保持不变，那么您可以相当容易地调整这些元素的位置，无论多少像素都适合您。

使用jQuery，您可以找到元素的位置，然后只需添加20个像素。

使用jQuery通过offset documentation。

// on carousel load or document load
$(".arrows").each(function() {
    // Scoot the icons down from where they are
    var newTop = $(this).offset.top + 30;
    var sameLeft = $(this).offset.left;
    $(this).offset({top:newTop, left:sameLeft });
});

但是，您也可以在箭头的CSS中指定所需的位置。但是，如果没有看到这些图标的CSS，我不确定css会帮助你安排它们，因为任何可能建议可能与你已经将它们放置的方式冲突。

修改：

通过twitter.github.com网站，我查看了那些旋转木马控制的css并调整了以下css，这似乎达到了你想要的效果：

.carousel-control {
    position: absolute; /* already here */
    top: 50%;  /* Was top: 40% */
    ...
}

您应该在自己的css文件中覆盖该css。添加您自己的类并将其添加到箭头上，或者只使用它已有的类，并在必要时使用!important。