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

【问题标题】：How to Vertically align Twitter Bootstrap Carousel's Arrow?如何垂直对齐 Twitter Bootstrap Carousel 的箭头？
【发布时间】：2012-05-10 09:19:51
【问题描述】：

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

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

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

如何使箭头垂直居中？

【问题讨论】：

它应该是自动垂直居中的。您是否修改了引导程序中的任何内容？
我没有编辑任何关于它的内容。
您能否发布指向您网站的链接或在jsfiddle.net 中提供您的代码以便我们查看？该功能应该开箱即用，无需修改或修复。

标签： jquery css twitter xhtml twitter-bootstrap

【解决方案1】：

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

但是，如果您知道轮播的高度将保持不变，那么您可以轻松地将这些元素的位置向下调整到适合您的像素数。

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

通过offset documentation使用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。

【讨论】：