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.

@ljhennessy what do you want ? is it the first example you shown in question? — divy3993, Jun 21 '15 at 14:52
Yes. The left and right images must be aligned to their respective sides of the row. The text and link underneath should be aligned under the images. — ljhennessy, Jun 21 '15 at 15:43

Alberto I.N.J. · Accepted Answer · 2015-06-22T03:25:13.723

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.

edited Jun 22 '15 at 03:25

answered Jun 21 '15 at 14:18

Alberto I.N.J.

1,855
14
19

Thanks for the link! I had not used Jsfiddle before, very helpful. – ljhennessy Jun 21 '15 at 15:50
I created a JSFiddle https://jsfiddle.net/ljhennessy/j8jrn719/. The problem (as you can see), is that the images still aren't aligned to the left and right of the row (i.e. the red borders). – ljhennessy Jun 21 '15 at 15:50
Just add style to your image. width: 100%. I already updated the jsfiddle link. – Alberto I.N.J. Jun 22 '15 at 02:38

score 0 · Answer 2 · answered Jun 21 '15 at 14:31

0

Just change text-allign property to center for .left and .right

answered Jun 21 '15 at 14:31

Shishir Trivedi

74
3

Align 3 divs within row div with text centered

2 Answers2