Question

Trying to keep a box centered vertically within another box. I know there’s css that can do this, but I’d rather use jquery, more reliable(?).

var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);

$(".Text").css({
    marginTop: 'vertAlign'
});

Not sure what detail I’m missing. The output should be half the available vertical space, in pixels.

EDIT

Originally, the text block was a span contained by a div. The div had a set height (140 px in this case), and the text block, the span, would be variable height based on how much text was in it. However, I need this text block to be editable. So I changed it to a text area. however, the behavior for the dimensions of the text area is awkward, and I had to set a static height and width to it. Now the height of this text block isn’t variable, so there’s no difference in height between it and it’s parent with which to derive the margin-top spacing from. What should I do?

Answer 1

Remove quotes surrounding vertAlign

$(".Text").css('margin-top', vertAlign);

Try the above code. It must help you.