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

Question

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

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

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

我怎样才能垂直居中箭头？

Answer 1

元素最终落在您的布局中的位置可能会受到数量惊人的因素的影响。如果没有看到您的标记，您的问题的特定解决方案是不可能的。

但是，如果您知道轮播的高度将保持不变，那么您可以很容易地调整这些元素的位置，无论它适合您多少像素。

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

通过偏移文档使用 jQuery 。

// 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 站点，我查看了那些 carousel-control 的 css 并调整了以下 css，它似乎达到了您想要的效果：

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

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