按钮旁边的jQuery UI滑块垂直居中

Question

我有一个jQuery UI滑块和两个相邻的按钮，我想将滑块垂直居中放在按钮旁边。

我创造了一把小提琴，展示了我想要实现的目标：http://jsfiddle.net/cKv34/

#button1, #button2 {
float: right;
}
#wrapper {
overflow: hidden;
display: block;
padding: 10px;
}
#slider {
float: left;
width: 100%;
}
...
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<span id="wrapper"><div id="slider"></div></span>

我差不多到了，但现在我在滑块的包装器跨度元素上使用了一个固定的填充，这让我很头疼

有没有一种方法可以在不使用常数值的情况下实现居中？

_{我对任何建议都持开放态度，因为我是CSS新手(我的小提琴是基于这个答案)}

Answer 1

我用了一种绝对不聪明的方法，在加载页面后使用jQuery查找所需的值，然后相应地调整CSS。

这是一把小提琴，这是jQuery:

var btnHeight = $('#button1').height(),
slideHeight = $('#slider').height(),
buffer = ((btnHeight - slideHeight)/2);
$('#wrapper').height(btnHeight), // set span to button height
$('#slider').css({'margin-top':buffer}); // set margin accordingly

我试过几次只使用CSS来解决问题，但我遇到了和你一样的问题，我认为这些问题源于你的HTML结构。如果一个元素不包含在同一DOM元素中，则很难将它们相对于另一个元素进行对齐。因此，从HTML结构开始，将#wrapper与按钮对齐比将#slider与按钮对齐更容易。我把你的#wrapper调整为你按钮的高度，然后用一点数学运算把#slider调低。

如果你把包装器放在整个元素集、滑块和按钮周围，而不仅仅是滑块，如果这不会破坏你的布局，你可能会更幸运。如果DOM结构不能给两个元素一个明确的相互引用，即通过成为同一父元素的子元素，那么您通常必须求助于LESS或jQuery等库，这些库允许您计算和存储值，以便以后进行比较。

[EDIT]

我保留了左/右填充，但删除了滑块的顶部/底部，因为问题是关于垂直对齐。

Answer 2

以下css可能有助于

#button1, #button2 {
float: right;
}
#wrapper {
overflow: hidden;
display: block;
position:relative;
top:13px;
}
#slider {
float: left;
width: 98%;
}