我有这样的代码https://jsfiddle.net/96Lnxr38/3/但如您所见 - d1 类的 div 未正确对齐。如果我在 <div class="d1"></div> 之间添加更多空格元素 - 对齐可以正常工作。是浏览器错误还是我的错误？我发现 FF 工作正常，Chome/Safari 向我展示了这个错误。
最佳答案
问题是因为内联 block div 之间有空格。这些空白字符也参与流并占据行内或行内 block 元素之间的空间。
尝试简单地删除 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 更改为 .d1 样式中的 block。
关于html - 为什么 div 不能很好地居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43154169/