语法：使用变量作为 css 值

Question

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

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

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

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

编辑

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

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还是苹果。此外，您可能想要进行一些范围检查，您不希望 vertAlign 成为消极的。