Div Horizontal Center NO Absolute

Question

I'm with a little problem.

I have the container div for some elements which are images, inside other divs. Something like:

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

I need to center the container verticaly, but i can't use the top: -healfHeight; margin-top: 50%; because then the jquery ui drag won't work. So any other idea of how can i solve this? :(

calculate the height of the image, the height of the screen and then the top value. — Sindhara, Jun 18 '12 at 14:45
http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen — Johan, Jun 18 '12 at 14:46
why are you saying that jquery draggable don't work when it's position is absolute ? — GregM, Jun 18 '12 at 14:50

score 1 · Answer 1 · answered Jun 18 '12 at 14:49

1

Try setting the parent container to position: relative, and the element you want to center to margin: auto.

answered Jun 18 '12 at 14:49

mkaito

1,005
1
10
19

+1 That solved my problem, actually I didn't need `position: relative` on parent wrapper. – Alireza Jul 21 '12 at 05:59

Ram · Accepted Answer · 2012-06-18T14:56:52.480

0

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

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

edited Jun 18 '12 at 14:56

answered Jun 18 '12 at 14:49

Ram

143,282
16
168
197

score 0 · Answer 3 · answered Jun 18 '12 at 14:50

I'm not sure how jquery positioning works, but if your answer involves only position on these divs with CSS, then:

Make the container div position:absolute; top:50%; left:50%;

Then your 'draggable' div needs this positioning: position:relative; top:(-half the total height of the div); left:(-half the width of the div);

For examples, if your draggable div is 100px by 100px, then the top would be -50px and the left would be -50px.

score 0 · Answer 4 · answered Jun 18 '12 at 14:54

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

Marke sure the parent width is wider than the draggable element, then try:

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

Edit, sorry, just realised you need it centered vertically.

Try:

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

Div Horizontal Center NO Absolute

4 Answers4