.wrap( ) 是否取消包装样式属性？

Question

我有一个按钮：

var button = ($('<button>', {
            "id": "jspsych-free-sort-done-btn",
            "class": "jspsych-free-sort",
            "html": "Done",
            ...
}));

我想居中。 Whosebug 上有人建议使用 .wrap() 添加包装器 div 但这似乎并没有使按钮居中：

button.wrap("<div style='text-align:center'> </div>");

.wrap() 是否取消包装器的样式属性？如果是这样，我如何将我的按钮居中？谢谢！

Answer 1

你可以给你的包装一个宽度，比如 width:100%; text-align:center;，而我也想在我的按钮样式中添加 margin-left:auto; margin-right:auto;。

Answer 2

一个可能的问题是如何以及何时包装元素以及如何将按钮添加到 dom。

如果您在将按钮添加到 dom 之前包装按钮，然后将按钮直接添加到 dom，那么包装的 div 将不会添加到 dom，所以换行不会有任何效果。

所以包裹按钮，然后将按钮的父元素添加到 dom like

var button = ($('<button>', {
  "id": "jspsych-free-sort-done-btn",
  "class": "jspsych-free-sort",
  "html": "Done"
}));

button.wrap("<div style='text-align:center'> </div>");

button.parent().appendTo('body')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

wrap() 为 button 对象创建父元素。您可以使用 parent() 来选择它。另一种方法是使用 ID 添加后换行。

var button = $('<button>', {
    "id": "jspsych-free-sort-done-btn",
    "class": "jspsych-free-sort",
    "html": "Done"
}).wrap("<div style='text-align:center'> </div>").parent();
button.appendTo('body')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

.wrap( ) 是否取消包装样式属性？

Does .wrap( ) cancel the wrappers style properties?

html

css

jquery

text-align