Question

我正在尝试将div元素放到与中心对齐的屏幕中心，但是顶部边距仍然停留在顶部而不是居中。

我尝试了divElement.style.marginTop =“ 100px”;但这没什么改变。

//this is the javascript

function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";

// Adding a paragraph
var paragraph = document.createElement("P");
var text = 
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
  alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}

现在div居中，但顶部固定在屏幕顶部，我希望它位于中心或距离顶部至少100px。

Answer 1

编辑此行：

divElement.style.margin="0 auto";

并使其：

divElement.style.margin="100px auto";

也许您已经在该行代码上方添加了divElement.style.marginTop = "100px"，以便将其覆盖。

var divElement = document.createElement("Div");
divElement.id = "divID";

// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="100px auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";

// Adding a paragraph
var paragraph = document.createElement("P");
var text = 
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);

// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
  alert("Hi!");
});
divElement.appendChild(button);

// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');

如何在javascript中正确使用DOM样式的margin top属性？

1 个答案: