jquery - 如何垂直对齐 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。