文本对齐打破jQuery [重复]答案

【问题标题】：text-align breaking jQuery [duplicate]文本对齐打破jQuery [重复]
【发布时间】：2013-12-30 22:31:25
【问题描述】：

我正在尝试为我的一些 div 编写叠加层，以防止用户在不执行先前任务的情况下走得太远。我有覆盖工作并显示消息，但是当我尝试将消息居中时，问题就出现了。

我的 jQuery 看起来像这样

$("<div>You have to complete your previous tasks before you can move on.</div>").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    top: 0,
    left: 0,
    background: "rgba(0,0,0,0.3)"
}).appendTo($(".disabled-box").css("position", "relative"));

我一放

   text-align: "center"

在那里它会中断并抛出错误消息

SyntaxError: Unexpected token '-'

任何想法为什么会发生这种情况？

【问题讨论】：

使用驼峰式大小写：textAlign: "center", 或将 text-align 键括在引号内
这不是重复的，因为他们在那里使用的文本对齐在这里不起作用。
它是重复的。有很多答案，有很多可能的方法来做到这一点。我确信他们工作。如果您正在寻找不同的答案（无论如何......），请在现有问题上开放赏金。

标签： jquery css

【解决方案1】：

您需要将代码更改为：

$("<div>You have to complete your previous tasks before you can move on.</div>").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    top: 0,
    left: 0,
    background: "rgba(0,0,0,0.3)",
    textAlign: 'center'
}).appendTo($(".disabled-box").css("position", "relative"));

对于样式，当引用使用 JavaScript 的样式时，破折号总是替换为 camelCase。

【讨论】：

非常感谢！我知道发生了类似的事情，但无法确定！

【解决方案2】：

像这样添加它：

$("<div>You have to complete your previous tasks before you can move on.</div>").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    top: 0,
    "text-align": "center",
    left: 0,
    background: "rgba(0,0,0,0.3)"
}).appendTo($(".disabled-box").css("position", "relative"));

【讨论】：

我试过了，然后它说有一个非法的字符串或中心。
我刚刚进行了编辑，因为我忘记了一个逗号，你是这样尝试的吗？

【解决方案3】：

你可以的

textAlign: "center"

但是

"text-align": "center"

也可以。由你决定。

我只是想保持一致。

【讨论】：

【解决方案4】：

尝试position: "fixed" 和样式margins 我一直这样做是为了显示我自己的信息。我认为您的对话框在屏幕上将是静态的。

不要在 JQuery 上浪费代码，我最好为你的 div 做一个类中心。

.center{margin:0 0;width:100%;height:100%;top:0px;left:0px;position:fixed;background-color:#FAFAFA;overflow:hidden;opacity:0.9;z-index:99;}

希望对你有帮助。

【讨论】：