Question

每当我调整浏览器窗口的大小时，此图像都不会水平居中。

HTML：

<div class="iPad">
<div class="text"> </div>
<div class="device"> </div>
</div>

的CSS：

.text {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.device {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Answer 1

如果您想对内容进行居中对齐，请按特定方式对其进行定位。您应该使父div的位置相对，而children元素应该是绝对的。这样，即使父容器的宽度动态变化，图像也将始终水平居中。

.iPad {
  width:100%;
  max-width:500px;
  height:400px;
  background: red;
  position: relative;
  margin: 0 auto;
}

.device {
 position: absolute;
  width:200px;
  height: 300px;
  bottom: 10px;
  left: 50%;
  transform: translatex(-50%);
}

.device img {
  width:100%;
}

查看此codepen：http://codepen.io/nighrage/pen/zGJOJg

浏览器调整大小时图像不居中

1 个答案: