javascript - 无法使用 css 居中 javascript 创建的按钮

Question

我在下面的代码中用 javascript 创建了一个按钮，但我无法设置它的样式。 text-align:center 和 margin: 0 auto 都不起作用。有没有人有办法解决吗？谢谢!

button = document.createElement("button");
button.innerHTML = "Reset High Score"
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener("click", function() {
  alert("High Score Reset!");
  localStorage.clear();
  location.reload();
})

button {
  margin: 0 auto;
  text-align: center;
}

Answer 1

原因是您不直接将内联元素居中，而是将居中应用于它们的父元素，然后容器的内容居中。另外，inline elements没有边距或填充，只有 block-level元素做。

text-align是一个 inherited property .这意味着它影响其后代元素而不是自身。

了解一个元素是 block 元素还是内联元素非常重要，因为正如您通过艰难的方式发现的那样，某些 CSS 属性只适用于其中一个元素，而不是另一个元素。

实际上很容易区分内联元素和 block 级元素。 block 级元素将它们的内容放在一个新行上，而内联元素则不会。因此，div 是一个 block ，而 button 是一个内联。知道这一点，当你查看 CSS 文档时，你可以看到该属性是否适用于你拥有的元素类型。在我之前提到的关于 text-align 的链接中，如果您向下滚动到浏览器兼容性图表的正上方，您会看到对于 text-align，它表示它是继承的属性并应用于 block 。

button = document.createElement("button");
button.innerHTML = "Reset High Score"
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
button.addEventListener("click", function(){
    alert("High Score Reset!");
    localStorage.clear();
    location.reload();
})

body {
margin: 0 auto;
text-align: center;

}

仅供引用:

永远，永远，永远不要这样做:document.getElementsByTagName("body")[0]。请阅读this other post of mine这就解释了这有多糟糕。相反，使用 .querySelector() 或者，在这种情况下，因为您想要唯一的 body 元素，它是 document 的子元素>，你可以只写document.body。

button = document.createElement("button");
button.innerHTML = "Reset High Score"
var body = document.querySelector("body"); // Instead of getElementsByTagName()
var body = document.body; // The easiest way to get a reference to the body element
body.appendChild(button);
button.addEventListener("click", function(){
    alert("High Score Reset!");
    localStorage.clear();
    location.reload();
})

body {
margin: 0 auto;
text-align: center;

}