如何垂直对齐Twitter Bootstrap旋转木马的箭头？

问题描述：

正如你在旋转木马上看到的那样，有一个箭头可以向右或向左滑动。如何垂直对齐Twitter Bootstrap旋转木马的箭头？

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

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

enter image description here

我怎么能垂直居中那箭？

它应该是自动垂直居中。你有没有修改bootstrap中的任何内容？ –

我没有编辑任何关于它的东西。 – SNaRe

你可以发布一个链接到你的网站或在http://jsfiddle.net提供你的代码，所以我们可以看看？该功能应该无需修改或修复即可使用。 –

答

哪里的元素最终在您的布局着陆可以通过令人难以置信的数量的因素操纵。没有看到你的标记，你的问题的具体解决方案是不可能的。但是，如果您知道旋转木马的高度将保持不变，那么您可以很容易地调整这些元素的位置，但无论它适合多少像素。

使用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。

比你。这解决了我的问题。 – SNaRe

@SNaRe;别客气。很高兴我能帮上忙 – veeTrain

如何垂直对齐Twitter Bootstrap旋转木马的箭头？

相关推荐