css - 在div中居中一个div？

Question

我试图将三个 div 框置于一个大的 div 框的中心。网格将是 3 倍宽和自动高度。

.t-box920g {
  width: 960px;
  height: auto;
  background: #121212;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: auto;
  border: 1px dotted #363636;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

.i-box {
  width: 279px;
  height: 209px;
  background: #ffffff;
  margin-right: auto;
  margin-left: auto;
  float: left;
  display: inline;
  text-align: justify;
}

.i-pbox {
  width: 276px;
  height: 206px;
  background: #121212;
  border: solid 2px #ffffff;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

#i-imageconstrain {
  width: auto;
  height: auto;
  max-width: 276px;
  max-height: 206px;
  min-width: 276px;
  min-height: 206px;
  overflow-x: hidden;
  overflow-y: hidden;
}

<div class="t-box920g">
  <div class="i-box">
    <div class="i-pbox">
      <a data-fancybox="gallery" href="images/gallery/sample1.jpg">
        <img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
      </a>
    </div>
  </div>
  <div class="i-box">
    <div class="i-pbox">
      <a data-fancybox="gallery" href="images/gallery/sample2.jpg">
        <img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
      </a>
    </div>
  </div>
  <div class="i-box">
    <div class="i-pbox">
      <a data-fancybox="gallery" href="images/gallery/sample3.jpg">
        <img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
      </a>
    </div>
  </div>
</div>

除 t-box920g 的内容左对齐外，一切都按计划进行。我尝试了很多组合，但到目前为止都没有奏效。有建议吗？如果我已经尝试过，我会告诉你的。

尝试将 text-align、align-content、align-items、margin: auto 组合用于所有 css。

我希望它居中对齐且间距均匀。其实都剩下了。

Answer 1

使用 flex 盒子。您可以阅读有关如何使用它的更多信息 here和 here如果你喜欢通过游戏学习。

这个问题已经在 Stack Owerflow 上被问过并回答过不止一次了，例如 here .

.t-box920g {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.t-box920g .i-box {
  background-color: blue;
  width: 32%;
}

<div class="t-box920g">
  <div class="i-box">
    <div class="i-pbox">
      <a data-fancybox="gallery" href="images/gallery/sample1.jpg">
        <img id="i-imageconstrain" src="images/gallery/sample1.jpg" border="0" />
      </a>
    </div>
  </div>
  <div class="i-box">
    <div class="i-pbox">
      <a data-fancybox="gallery" href="images/gallery/sample2.jpg">
        <img id="i-imageconstrain" src="images/gallery/sample2.jpg" border="0" />
      </a>
    </div>
  </div>
  <div class="i-box">
    <div class="i-pbox">
      <a data-fancybox="gallery" href="images/gallery/sample3.jpg">
        <img id="i-imageconstrain" src="images/gallery/sample3.jpg" border="0" />
      </a>
    </div>
  </div>
</div>