Question

我有这样的代码https://jsfiddle.net/96Lnxr38/3/但你可以看到 - 类d1的div没有正确对齐。如果我在<div class="d1"></div>元素之间添加更多空格 - 对齐将正常工作。这是浏览器错误还是我的错误？我发现FF工作正常，Chome / Safari向我展示了这个bug。

Answer 1

问题是因为你的内联块div之间有空格。这些空白字符也参与流程并占用内联或内联块元素之间的空间。

尝试删除div.d1元素之间的空格：

.cont {
      text-align: center;
      width: 500px;
      word-spacing: 80px;
    }

    .d1 {
      width: 300px;
      height: 500px;
      margin-top: 10px;
      background-color: red;
      display: inline-block;
    }

<body>
  <div class="cont">
    <!-- Note no whitespace between divs -->
    <div class="d1"></div><div class="d1"></div><div class="d1"></div>
  </div>
</body>

另一个选择是将display更改为block样式中的.d1。

Answer 2

如果使用像素宽度，最佳解决方案是margin：auto;

.cont {
  text-align: center;
  width: 500px;
  margin:auto;
}

.d1 {
  width: 300px;
  height: 500px;
  margin-top: 10px;
  background-color: red;
  display: inline-block;
  margin:auto;
}

点击此链接：https://jsfiddle.net/96Lnxr38/6/

为什么div不能很好地集中？

2 个答案: