Center a divs within div?

Question

I'm trying to center three div boxes within one large one. A grid is going to be 3 wide and auto height.

.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>

Everything works as planned EXCEPT for the content of t-box920g being left justified. I've tried a lot of combos and none have worked so far. Got a suggestion? I'll let you know if I tried already.

Tried text-align, align-content, align-items, margin: auto in combinations for all css.

I expect it to be center justified with nice even spacing. Actually is all left.

score 1 · Answer 1 · answered Apr 19 '19 at 17:39

Use flexbox. You can read more about how to use it here and here if you like to learn through games.

This question was asked and answered on Stack Owerflow already more than once, for instance 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>

Center a divs within div?

1 Answers1