title: Centering images in CSS responsive photo gallery w/caption
body: <p>My goal is to have a simple responsive CSS photo gallery where 
  (a) images are centered vertically within each row
  (b) each row of images is centered horizontally
  (c) the caption is centered horizontally below each image</p>
  
  <p>I've been trying the following code:  <a href="http://www.terragalleria.com/tmp/test-align.html" rel="nofollow noreferrer">http://www.terragalleria.com/tmp/test-align.html</a></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;HTML&gt;
  &lt;head&gt;
  
  &lt;style&gt;
  .centered_block {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
  }
  
  .img_with_link {
  padding: 0.5em;
  float: left;
  display: table;
  width: 240px;
  height: 240px;
  text-align: center;
  }
  
  .img_with_link_inside {
  display: table-cell;
  vertical-align: middle;
  }
  
  div.img_with_link img {
  display: inline;
  margin: 0.5em;
  }
  
  .link_with_img {
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;BODY&gt;
  
  &lt;div class="centered_block"&gt;
  
  &lt;div class = "img_with_link"&gt;
  &lt;div class = "img_with_link_inside"&gt;
  &lt;img src = "http://www.terragalleria.com/images/np-pacific/olym11102.small.jpeg"&gt;
  &lt;div class = "link_with_img"&gt;
  Olympic
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class = "img_with_link"&gt;
  &lt;div class = "img_with_link_inside"&gt;
  &lt;img src = "http://www.terragalleria.com/images/np-pacific/redw1447.small.jpeg"&gt;  
  &lt;div class = "link_with_img"&gt;
  Redwood
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class = "img_with_link"&gt;
  &lt;div class = "img_with_link_inside"&gt;
  &lt;img src = "http://www.terragalleria.com/images/np-pacific/chis1466.small.jpeg"&gt;  
  &lt;div class = "link_with_img"&gt;
  Channel Islands
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/BODY&gt;
  &lt;/HTML&gt; 
  </code></pre>
  
  <p>Here is the resulting browser window:</p>
  
  <p><a href="https://i.stack.imgur.com/oherb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oherb.jpg" alt="resulting browser window"></a><br>
  <sub>(source: <a href="http://www.terragalleria.com/tmp/medium.jpg" rel="nofollow noreferrer">terragalleria.com</a>)</sub>  </p>
  
  <p>Here is what I am trying to get:</p>
  
  <p><a href="https://i.stack.imgur.com/WSazG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WSazG.jpg" alt="desired browser window"></a><br>
  <sub>(source: <a href="http://www.terragalleria.com/tmp/medium-desired.jpg" rel="nofollow noreferrer">terragalleria.com</a>)</sub>  </p>
  
  <p>Note that the difficulty here seems to be caused by the caption. I am able to get that result (meeting criteria (a) and (b)) without the caption, see <a href="http://www.terragalleria.com/mobile/np.olympic.html" rel="nofollow noreferrer">http://www.terragalleria.com/mobile/np.olympic.html</a></p>
  
  <p>Any ideas on how to fix the code ? Thank</p>