Syntax: Use variable for css value

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?

`$(".Text").css({'margin-top', vertAlign});` – Pav May 12 '11 at 05:00 — Pav, May 12 '11 at 05:00
try 'vertAlign' without the quotes ... – AlexanderJohannesen May 12 '11 at 05:02 — AlexanderJohannesen, May 12 '11 at 05:02

score 36 · Accepted Answer · answered May 12 '11 at 04:59

36

Remove quotes surrounding vertAlign

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

Try the above code. It must help you.

answered May 12 '11 at 04:59

Arman P.

4,314
2
29
47

i="40px"; $(".className").css({'width':"calc(100% - i)"}); is not working. I want to use the variable value inside the css. Is there any way to use like that. If I give value directly it is working. I am having all lot of notes/comments and I am right aligning a button to each comment box.all divs will be having variable length so I need to add width dynamically. – Allen Johnson Jul 18 '21 at 10:11
You can write $(".className").css('width', "calc(100% - "+i); to make it workable. – Nav Raj Bhattarai Jul 31 '21 at 13:54

score 10 · Answer 2 · answered May 12 '11 at 05:06

10

optionally if you'd like to do more than one style:

var styles = {'margin-top':vertAlign,'property':100,'property':somevalue}
$(".Text").css(styles);

answered May 12 '11 at 05:06

robx

3,093
2
26
29

score 2 · Answer 3 · edited Feb 10 '16 at 13:00

2

var textH = $(".Text").height();
var vertAlign = ((140 - textH)/2);
$(".Text").css({
        margin-top: vertAlign + 'px'
    });

You need to specify the unit, otherwise your browser won't be able to tell whether you want pixels or em or apples.Also you might want to do some range checking, you do not want vertAlign to be negative.

edited Feb 10 '16 at 13:00

love thakker

460
2
13
29

answered May 12 '11 at 05:11

Arjan

9,784
1
31
41

2

Unit defaults to px. And there is no `marginTop` css property. – Arman P. May 12 '11 at 06:22

Syntax: Use variable for css value

3 Answers3

Linked

Related