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新手（我已根据this回答我的小提琴）。

Answer 1

我已经完成了非常聪明的方式，通过使用jQuery在页面加载后找到所需的值，然后相应地调整CSS。

这是一个fiddle，这里是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结构不能给2个元素一个明确的引用，即通过成为同一个父元素的子元素，那么你通常不得不依赖于像LESS或jQuery这样的库来让你计算和存储值以便以后进行比较

<强> [编辑]

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

Answer 2

以下css可能会对您有所帮助

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

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

2 个答案: