Can't center image with bootstrap

1

Hi,

I’m having a really hard time centering my image and its caption with Bootstrap 3 via Codepen. Here’s my code:

<div class="img-thumbnail">
          <img src="https://www.ushmm.org/lcmedia/photo/lc/image/61/61768.jpg" id="anne-frank-img" /*>

          <div class="text-center">A photo of Anne captured during her younger years.</div>
        </div>

Here’s a link to my pen. Hope you can help out a beginner!

Thanks!

2

You need to wrap the photo and caption in another div with a class of text-center. Also, you have an asterisk at the end of your img tag you need to remove.

1 Like
3

That worked perfectly. I’ve been stuck in fixing that image for more than an hour. Thanks cndragn!

1 Like
4

Awe! Glad I could help!!! :blush: You’re off to a great start with this!!

A little something I saw… be mindful of how you use your h1, h2, h3 etc tags… they are not styling tags, but h for header header tags, like for the title of a section …but you are are using them inside of your ul (unordered list).

Consider, if your website needed a page of contents, the header tags would be the chapter titles for each section.

5

Realized that I forgot to put a closing tag in my ul (which led to the other elements below it being counted within ul). Thanks for pointing that out!

6

Those meddling unclosed tags!!! :laughing: Glad you found the problem!!!