Trouble with centering images on Tribute Pen

Code Feedback
1

Hello! My name is Bob. I’m currently working on the tribute page project. I’m having a lot of fun doing it, but I’ve run into a bit of a hiccup. I’m trying to make my images about half way down the page all be the same size, as well as align the images to the very center of the page. I’ve tried it a number of ways and it still isn’t working. I know “text-center” and “center-block” do not work with “img-responsive”, so I’m not quite sure how to make all my images the same size while making them centered. I also tried adding “margin: auto;” in my CSS. Here is my CodePen:

Any help or advice would be greatly appreciated! Thanks!

-Bob

2

You are wrapping your images in a “col-md-4” which is stopping you from centering them. Also, you don’t really need all those rows.

If you want images to have the same size even if they have different proportions, you could use a trick with backgrounds. Basically, you replace all your images with divs and give the divs the images as backgrounds.

So, this:

<div class="col-md-4">
  <div><img src="https://c1.staticflickr.com/9/8160/6988318986_71e0c2af57_b.jpg" class="img-circle img-responsive"></img></div>
</div>

becomes this:

<div class="col-12">
  <div class="band-image first m-auto"></div>
</div>

(Notice that I changed “col-md-4” to “col-12”. This way, the wrapping div is taking all the horizontal space and then the class “m-auto” centers the div with the image, giving it an auto margin on every side)

Then, in your CSS you assign some base styling to the class band-image (width, height and such) and the background-image for each one (first, second, etc), like:

.band-image {
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  width:300px;
  height:300px;
  border-radius:50%;
}
.band-image.first {
  background-image:url(https://c1.staticflickr.com/9/8160/6988318986_71e0c2af57_b.jpg);
}
...

After that, you can use media queries to adjust the divs dimensions according to the resolution, if you need it.

I forked your pen to make you an example here, so you can see the differences.

1 Like
3

You can’t use li tags outside ul or ol or menu tags.
Why did you put body tags in the middle of HTML?
img tags are self-closing: <img />
What is <p1>? Did you mean <p>? Also you must close it.

For images try to set the width also.

Fix those errors first and then look further.

Also read on Bootstrap documentation, but I think it would be easier to just do it in plain HTML/CSS without Bootstrap.

4

Thank you so much for the help and clear explanation! :smiley: That’s a cool trick with replacing the images with divs. Really tidy’s up the html as well.

1 Like
5

Thank you for the help and pointing those out! I shall fix those.