jquery - vAlign 元素居中，但相对于内容处于水平位置

Question

http://jsfiddle.net/DAFHq/1/

<div id="gray-box">
<div id="red-box"></div>
</div>

我需要将红色方块放置在灰色框右侧 20 像素处，其中包含滚动内容，同时保持它在中心垂直对齐。

在滚动和调整屏幕大小时，它应该保持相对于灰色框的位置。

有任何想法吗？jsFiddle 是我发现并修改以显示我需要的东西，垂直对齐是完美的，但我不知道如何将它放置在我需要的水平位置。

也许与jQuery有关？

Answer 1

您需要一个用于滚动元素的支架元素。

<div id="grey-box">
    <div id="red-box"></div>
    <div id="elements-holder"></div>
</div>

.elements-holder {
    overflow: auto;
}

#grey-box {
    position: relative;
}

#red-box {
    position: absolute;
    right: 20px;
    height: 40px;
    width: 40px;
    top: 50%;
    margin-top: -20px; 
}

Answer 2

试试这个：

var positionFoo = function() {
  $('#foo').css({
    'left': $('#bar').offset().left + $('#bar').width() + 20 + 'px',
    'top': ($(window).height() / 2) - ($('#foo').height() / 2)
  });
};

$(window).resize(positionFoo);
positionFoo();

您还需要添加position: fixed;到#Foo.

更新的小提琴