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
– Pav

2011-05-12 05:00:20 +00:00
Commented May 12, 2011 at 5:00 — Pav
– Pav, Commented May 12, 2011 at 5:00
try 'vertAlign' without the quotes ...

AlexanderJohannesen
– AlexanderJohannesen

2011-05-12 05:02:49 +00:00
Commented May 12, 2011 at 5:02 — AlexanderJohannesen
– AlexanderJohannesen, Commented May 12, 2011 at 5:02

Arman P. · Accepted Answer · 2011-05-12 04:59:34Z

36

Remove quotes surrounding vertAlign

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

Try the above code. It must help you.

answered May 12, 2011 at 4:59

Arman P.

4,4142 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Allen Johnson Over a year ago

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.

Nav Raj Bhattarai Over a year ago

You can write $(".className").css('width', "calc(100% - "+i); to make it workable.

robx · Accepted Answer · 2011-05-12 05:06:45Z

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, 2011 at 5:06

robx

3,1232 gold badges28 silver badges29 bronze badges

Comments

love thakker · Accepted Answer · 2016-02-10 13:00:53Z

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, 2016 at 13:00

love thakker

4702 gold badges13 silver badges29 bronze badges

answered May 12, 2011 at 5:11

Arjan

9,8941 gold badge33 silver badges43 bronze badges

1 Comment

Arman P. Over a year ago

Unit defaults to px. And there is no marginTop css property.

Collectives™ on Stack Overflow

Syntax: Use variable for css value

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related