jquery - 语法：使用变量作为 css 值

Question

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

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

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

不知道我错过了什么细节。输出应该是可用垂直空间的一半，以像素为单位。

编辑

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

Answer 1

删除周围的引号vertAlign

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

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

Answer 2

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

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

Answer 3

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

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