jquery - Div 水平中心 NO 绝对

Question

我有一个小问题。

我在其他 div 内有一些图像元素的容器 div。就像是：

<div id="container">
    <div id="draggable">
        <img src="something">
    </div>
</div>

我需要将容器垂直居中，但我不能使用顶部：-healfHeight; 最高保证金：50%；因为那时 jquery ui 拖动将不起作用。那么关于我该如何解决这个问题的任何其他想法？:(

Answer 1

尝试将父容器设置为position: relative，并将要居中的元素设置为margin: auto。

Answer 2

var wh = $(window).height();
var ch = $('#container').height();
var mt = (wh - ch) / 2;
$('#container').css('margin-top', mt)

http://jsfiddle.net/zJrKh/1/

Answer 3

我不确定 jquery 定位是如何工作的，但是如果您的答案仅涉及使用 CSS 在这些 div 上的位置，那么：

使容器 div 位置：绝对；最高：50%；左：50%；

那么你的“可拖动” div 需要这个定位： position:relative; top:(-div 总高度的一半); left:(-div 宽度的一半);

例如，如果您的可拖动 div 为 100 像素 x 100 像素，那么顶部将为 -50 像素，左侧为 -50 像素。

Answer 4

<div id="container">
    <div id="draggable">
        <img src="something">
    </div>
</div>

确保父宽度比可拖动元素宽，然后尝试：

#draggable{display:block;margin:0 auto}

编辑，对不起，刚刚意识到你需要它垂直居中。

尝试：

#container{display:table-cell}
#draggable{vertical-align:middle}