title: Centering Figures with Captions
body: <p>I'm sorry if  this is a repost, but this is something I've been researching on here for awhile now and I can't seem to come up with the right answer. I'm trying to get these images to appear in the exact center of the page with the captions underneath, but they keep going on the left side of the page. </p>
  
  <p>Here's my html</p>
  
  <pre><code>&lt;figure&gt;
      &lt;img src="apple.jpg" alt='apple/&gt;
      &lt;figcaption&gt;Apple&lt;/figcaption&gt;           
  &lt;/figure&gt;       
  &lt;figure&gt;
      &lt;img src="apple.jpg" alt='apple'/&gt;
      &lt;figcaption&gt;Apple&lt;/figcaption&gt;           
  &lt;/figure&gt;
  &lt;figure&gt;
      &lt;img src="apple.jpg" alt='apple'/&gt;
      &lt;figcaption&gt;Apple&lt;/figcaption&gt;           
  &lt;/figure&gt;
  </code></pre>
  
  <p>And the css</p>
  
  <pre><code>figure{
     display: inline-block;
     margin: 0 auto;
  }
  figure img{
     vertical-align: top;                 
  }
  figure figcaption{
     text-align: center;
  }
  </code></pre>
  
  <p>Here's what I see:</p>
  
  <p><a href="https://i.stack.imgur.com/JZ2Qk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JZ2Qk.jpg" alt="enter image description here"></a></p>
  
  <p>Thanks in advance. I greatly appreciate any help. </p>