Question

以下是代码段：

var wrapper = document.createElement('DIV');
wrapper.setAttribute("width", x * rows);
wrapper.setAttribute("height", y * columns);
wrapper.align = "center";

var buttonWrap = document.createElement('DIV');
buttonWrap.setAttribute("style", "clear:float");

正如您在我的代码片段中看到的那样，我试图将我的div放在中心位置。但是这段代码不起作用。有效的是使两个div都固定。但是在一天结束时，第二个div将出现在第一个div上。

请帮忙。

Answer 1

如果你只能使用 CSS ，我会这样做：

.container {
  width: 500px;
  height: 150px;
  border: solid black 1px;
  
  /* Align center */
  display: flex;
  justify-content: center;
  align-items: center;
}
.small {
  background-color: red;
  width: 100px;
  height: 30px;
}
.big {
  background-color: green;
  width: 100px;
  height: 100px;
}

<div class="container">
  <div class="small"></div>
  <div class="big"></div>
</div>

如果您想在 javascript 中执行此操作，请以这种方式在CSS中应用上面描述的样式：

var container = document.getElementsByClassName('container')[0];
container.style.display = "flex";

依旧......

如何在Javascript中垂直居中两个div？

1 个答案: