Question

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

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

我需要将红色正方形放置在灰色框右侧20px处，并在其中滚动内容，同时保持其在中心垂直对齐。

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

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

也许是jQuery的东西？

Answer 1

你需要一个滚动元素的holder元素。

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

Updated fiddle

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

2 个答案: