1

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? :(

4
  • calculate the height of the image, the height of the screen and then the top value.
    – Sindhara
    Jun 18, 2012 at 14:45
  • stackoverflow.com/questions/210717/…
    – Johan
    Jun 18, 2012 at 14:46
  • 1
    Using JS for presentational purposes is wrong.
    – mkaito
    Jun 18, 2012 at 14:48
  • why are you saying that jquery draggable don't work when it's position is absolute ?
    – GregM
    Jun 18, 2012 at 14:50

4 Answers 4

1

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

1
  • +1 That solved my problem, actually I didn't need position: relative on parent wrapper.
    – Alireza
    Jul 21, 2012 at 5:59
0
var wh = $(window).height();
var ch = $('#container').height();
var mt = (wh - ch) / 2;
$('#container').css('margin-top', mt)

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

0

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.

0
0
<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}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.