Align 3 divs within row div with text centered

Question

Similar to How to align 3 divs (left/center/right) inside another div? , I am trying to align three divs within a parent div. Added complexity is that each div contains an image, text, and a link. I'd like these to be aligned link so:

[[LEFT-IMG]    [CENTER-IMG]    [RIGHT-IMG]]
    text           text            text
    link           link            link

However, the closest I can get is:

[[LEFT-IMG]    [CENTER-IMG]    [RIGHT-IMG]]
 text              text               text
 link              link               link

With the text and links mirroring the alignment of the image.

Here my HTML:

  <div class="row">
    <div class="col-4 left">
      <img src="http://placehold.it/250x150" alt="Thing 1">
      <p>THING 1</p>
      <a href="somedomain.com">somedomain.com</a>
    </div>
    <div class="col-4 center">
      <img src="http://placehold.it/250x150" alt="Thing 2">
      <p>THING 2</p>
      <a href="somedomain.com">somedomain.com</a>
    </div>
    <div class="col-4 right">
      <img src="http://placehold.it/250x150" alt="Thing 3">
      <p>THING 3</p>
      <a href="somedomain.com">somedomain.com</a>
    </div>
  </div>

My CSS:

.row {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
    display: flex;
    right: 0;
    text-align: center;
    flex-wrap: wrap;
}

.left {
    display: inline-block;
    text-align: left;
}

.right {
    display: inline-block;
    text-align: right;
}

.center {
    display: inline-block;
    margin: 0 auto;
}
.col-4 {
    width: 33.33%;
}

Note that these are all within a grid div with the following CSS:

.grid {
    margin: 0 auto;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
}

I have a feeling there's something fundamentally wrong with my structure, but I'm not sure what. Very new at this.

Any ideas?

UPDATE: Here's a JSFiddle showing current progress. http://jsfiddle.net/ljhennessy/j8jrn719/

The key here is that I'd like the left and right images to be aligned all the way to the red border on either side.

Answer 1

Just remove the class next to col-4 class.

Here's the Jsfiddle link .

It will look like this:

<div class="row">
  <div class="col-4">
    <img src="http://placehold.it/250x150" alt="Thing 1">
    <p>PROJECT 1</p>
    <a href="somedomain.com">somedomain.com</a>
  </div>
  <div class="col-4">
    <img src="http://placehold.it/250x150" alt="Thing 2">
    <p>THING 2</p>
    <a href="somedomain.com">somedomain.com</a>
  </div>
  <div class="col-4">
    <img src="http://placehold.it/250x150" alt="Thing 3">
    <p>THING 3</p>
    <a href="somedomain.com">somedomain.com</a>
  </div>
</div>

To fit your images with the column just add this code to your css:

img {
    width: 100%;
}

Hope it helps.

Answer 2

只需将text-allign属性更改为.left和.right的中心