Why won't the caption center?

#1

Hi, just finished my first project, the tribute page:

It went pretty smoothly my only problem was that I couldn’t get the captions to center - the caption for the photos should be centered under both photos and each video should have a caption centered under it.

The code for the photos is:

  <div id="photo-area">
    <div class="container" id="photo-container">
      <div class="row">
        <div class="col-sm-6"> <img width=100% height=88.5% src="http://..." alt="Barney Kessel photo"> </div>
        <div class="col-sm-6"> <img width=100% src="http://..."> </div>
          <div class="row"> 
	<div class="col-sm-12">
	  <h4 id="photo-caption" class="text-center">A swinging jazz guitar master in his natural habitat - pleasing the crowds.</h4>
      </div>
        </div>
      </div>  
    </div> <!-- end photo-container -->      
  </div> <!-- end photo-area -->

I assume that if I get this one to work, they other one will work fine?

Why didn’t this work?

Thanks,
Kevin

#2

You have a div tag in the wrong place.

Here’s a working version.

<div id="photo-area">
  <div class="container" id="photo-container">
    <div class="row">
      <div class="col-sm-6"> <img width=100% height=88.5% src="http://..." alt="Barney Kessel photo"> </div>
      <div class="col-sm-6"> <img width=100% src="http://..."> </div>
    </div> <!-- this div was missing! :) -->
    <div class="row"> 
      <div class="col-sm-12">
        <h4 id="photo-caption" class="text-center">A swinging jazz guitar master in his natural habitat - pleasing the crowds.</h4>
      </div>
    </div>
  <!-- </div> I was moved up into the missing div's spot! -->
  </div> <!-- end photo-container -->      
</div> <!-- end photo-area -->

Hope that helps!

#3

That did it, thanks.

1 Like
#4