Putting Three Images an Equal Distance Apart in A Row

Curriculum Help HTML-CSS
#1

I am trying to center the middle two images. I am using Bootstrap. Can someone please help me figure out how to do it? I’ve tried using center-block and offsetting, but neither one is working. If I can put the three images in each row an equal distance apart without Bootstrap that would work too.

Thank you.

#2

Try making all of the columns the same class with and add the text-center class to each image.

<div class="col-sm-4">
        <img src="imageURL" class="img-responsive text-center" alt="Image">
</div>
#3

As far as I can tell the top of the two middle images is actually centered, the problem with the second one is because your grid is organised like this for the second row:

<div class="row">
  <div class="col-sm-3 col-sm-offset-1"></div>
  <div class="col-sm-3 col-sm-offset-1"></div>
  <div class="col-sm-3"></div>
</div>

… where your middle column is actually offset by 1/12 of the width of the role because of col-sm-offset-1. Your probably realise what the problem is by now! :smile: If not: if you change it to match the first row of images, where the middle column has the “correct” class of col-sm-4, then the image should be centered.

A Bootstrap-free (and more elegant in my opinion) would be Flexbox!

EDIT: deleting the post doesn’t feel quite right, so I undeleted it!

#4

That didn’t work. It pushes everything to the left.

#5

The top of the two middle images isn’t centered. It’s just shifted to the left, whereas the bottom one is shifted to the right.

What I’m trying to do is move the upper image about a half inch to the right and the lower image a about a half inch to the left.

#6

I’m terribly sorry—you’re absolutely right; I had my screen squished earlier so that margins were also squished and I wasn’t paying enough to the code and assumed that you have already centered them.

It appears that there are two issues then:

  1. The problem that @RandellDawson has already pointed out—the columns are of different sizes and it needs to be fixed before the next point
  2. You are not actually centering any of your images—the other images only appears to be centered because they are just filling up the width of the columns

Bootstrap 3 has a center-block class that you can use to center images. Alternatively, you just need to apply auto for the left and right margins for the images—you could either create a new CSS class or apply it onto image-responsive.

Ultimately, and if you also want to easily align them vertically, consider learning Flexbox.

#7

Try getting rid of the <br> between the two rows and then making them all:

      <div class="col-sm-4 text-center">
        <img src="imageURL" class="img-responsive" alt="Image">
      </div>

Also, you would then add the following CSS to create some vertical space between the images when on smaller devices.

img {
  margin: 0 auto;
  margin-bottom: 15px;
}
#8

Thank you. That was perfect. I tried 20 different things and didn’t realize it was that easy.

#9

I actually want more vertical space then there currently is. Can someone please suggest a way to do that?

Thank you everyone. I’m learning a lot.

#10

margin-top and/or margin-bottom properties on the images should give you more vertical space.