Question

我正在尝试将三个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的内容外，所有内容均按计划工作。我已经尝试了很多组合，但到目前为止都没有奏效。有建议吗？如果我已经尝试过，我会通知您。

尝试文本对齐，对齐内容，对齐项，边距：对所有CSS自动组合。

我希望它以合理的间距居中对齐。其实都剩下了。

Answer 1

使用flexbox。如果您想通过游戏学习，可以阅读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>

将div置于div的中心吗？

1 个答案: