title: How to horizontally align two <figure>s?
body: <p>I'm using &lt;figure&gt; to display two images and I want the two &lt;figure&gt;s to be horizontally inline while the services div is centred on the page. I've got the div centred but I can't get the &lt;figure&gt;s to line up. I've tried &quot;display: inline-block;&quot; but it doesn't seem to work. What am I doing wrong?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.services {
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-flex-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      flex-direction: column;
      align-items: center;
      align-self: center;
      justify-content: center;
      flex-wrap: wrap;
      font-size: 20px;
      text-align: center;
  }
  
  .figurecenter figure {
      display: inline-block;
  }
  
  .figurecenter figcaption {
      margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                &lt;div class="services"&gt;
                      &lt;figure class="figurecenter"&gt;
                          &lt;h1&gt;PHSR&lt;/h1&gt;&lt;br&gt;
                          &lt;img width="268" height="133" alt="Pre-Start Health and Safety Review image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-1-GUY.png"&gt;&lt;br&gt;&lt;br&gt;
                          &lt;figcaption&gt;PHSR (Pre-Start Health &amp;amp; Safety Review)?&lt;br&gt;We can help.&lt;/figcaption&gt;&lt;br&gt;
                          &lt;a href="about/phsr.html" class="button" title="Click here to read more about PHSR"&gt;READ MORE&lt;/a&gt;&lt;br&gt;&lt;br&gt;
                      &lt;/figure&gt;
  
                      &lt;figure class="figurecenter"&gt;
                          &lt;h1&gt;Inspections&lt;/h1&gt;&lt;br&gt;
                          &lt;img width="268" height="133" alt="Inspections image" src="http://www.cafenocturne.com/RackInspections/images/MainImage-2-Wrench.png"&gt;&lt;br&gt;&lt;br&gt;
                          &lt;figcaption&gt;Rack inspections identify safety concerns and deficiencies with rack storage systems.&lt;/figcaption&gt;&lt;br&gt;
                          &lt;a href="about/inspections.html" class="button" title="Read more about our inspection process"&gt;READ MORE&lt;/a&gt;
                      &lt;/figure&gt;
                      &lt;div style="clear: both;" &gt; &lt;/div&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please ignore the broken buttons and other things as I didn't want to include the entire stylesheet for my work when my issue is just getting the two &lt;figure&gt;s to line up side-by-side.</p>