语法：使用变量作为 css 值答案

【问题标题】：Syntax: Use variable for css value语法：使用变量作为 css 值
【发布时间】：2011-08-23 19:49:12
【问题描述】：

试图让一个盒子在另一个盒子中垂直居中。我知道有 css 可以做到这一点，但我宁愿使用 jquery，更可靠（？）。

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

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

不确定我缺少什么细节。输出应该是可用垂直空间的一半，以像素为单位。

编辑

最初，文本块是一个 div 包含的跨度。 div 有一个设定的高度（在本例中为 140 像素），文本块（即跨度）将根据其中的文本量而变化高度。但是，我需要这个文本块是可编辑的。所以我把它改成了一个文本区域。但是，文本区域尺寸的行为很尴尬，我不得不为其设置静态高度和宽度。现在这个文本块的高度是不可变的，所以它和它的父级之间没有高度差异，从中可以得到页边距。我该怎么办？

【问题讨论】：

$(".Text").css({'margin-top', vertAlign});
尝试不带引号的 'vertAlign' ...

标签： jquery css math var

【解决方案1】：

删除vertAlign 周围的引号

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

试试上面的代码。它必须帮助你。

【讨论】：

i="40px"; $(".className").css({'width':"calc(100% - i)"});不管用。我想在css中使用变量值。有没有办法这样使用。如果我直接给出价值，它就会起作用。我有很多笔记/cmets，我正在将一个按钮与每个评论框对齐。所有 div 的长度都是可变的，所以我需要动态添加宽度。
您可以编写 $(".className").css('width', "calc(100% - "+i); 使其可行。

【解决方案2】：

如果您想做不止一种风格，也可以选择：

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

【讨论】：

【解决方案3】：

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

您需要指定单位，否则您的浏览器将无法判断您需要像素还是 em 或 apples。此外，您可能想要进行一些范围检查，您不希望 vertAlign 为负数。

【讨论】：

单位默认为 px。并且没有marginTop css 属性。