javascript - 当一个具有自动边距时如何并排对齐两个div

Question

我想要一个 div 必须margin: auto将其浮动到页面的中心。此页面还具有放大该元素的缩放功能，我希望该元素min-margin-left上有一个。

我尝试创建一个具有固定宽度的新元素，但是当我float: left在这两个元素上使用时，它不起作用，并且具有固定宽度（蓝色）的元素浮动在另一个元素之上。

此外，已经提出margin: auto的问题不涉及 a ，关于 min-margin 的问题也不涉及两个元素。

.papertextfield {
  width: 820px;
  margin: 20px auto;
  height: 1000px;
  border: none;
  display: inline-block;
  padding: 75px;
  background-color: white;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

<div style="background-color: blue; height: 1000px; display: inline-block; width: 50px;"></div>
<iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>

Answer 1

问题在于显示 - 要使您的居中工作，您需要将元素设置为块：

.papertextfield {
  width: 200px;
  margin: auto;
  background-color: red;
  display: block;
}

<iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>

要伪造最小边距，您可以使用带有填充的容器：

.papertextfield {
  width: 200px;
  margin: auto;
  background-color: red;
  display: block;
}

.container {
  padding-left: 60px;
  padding-right: 60px;
  background-color: blue;
}

<div class="container">
  <iframe name="textfield" id="textareathingy" class="papertextfield"></iframe>
</div>