html - 如何在父容器内居中对齐 div？

Question

前三个 div 中包含其他元素存在问题。如果我删除它们，那么它工作正常，但不是。 在此处查看输出

.results{
  text-align: center;
}
.result-box{
  width: 200px;
  height: 250px;
  background-color: red;
  margin: 10px;
  padding: 5px;
  display: inline-block;
}

<div class="wrapper">
  <div class="results">
    <div class="result-box"><p>Hello</p><p>World</p></div>
    <div class="result-box"><p>Nothing</p></div>
    <div class="result-box"><p>Everything</p></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
  </div>
</div>

标签： htmlcsswebfrontend

Answer 1

在容器内收集 div 的最佳解决方案是使用 flex (display:flex)或gird (display:gird)女巫网格在旧浏览器（Internet Explorer）中无法正常工作

但如果你不喜欢使用这些方法，这里是一个棘手的方法

.results{
  text-align: center;
  position:relative;
}
.result-box{
  width: 200px;
  height: 250px;
  background-color: red;
  margin: 10px;
  padding: 5px;
  display: inline-block;
  float:left;
}

<div class="wrapper">
  <div class="results">
    <div class="result-box"><p>Hello</p><p>World</p></div>
    <div class="result-box"><p>Nothing</p></div>
    <div class="result-box"><p>Everything</p></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
    <div class="result-box"></div>
  </div>
</div>