title: HTML5 Multiple Images on the same line with Captions
body: <p>I want to have multiple images on the same line with a caption below each image.
  I can put images on the same line using the <code>display:inline</code> tag.  When I add the figure tag, they are moved to different lines.
  I tried multiple variation and can't get it to work.</p>
  
  <p>Am I using the wrong tags for the job?  I've seen this on other sites, but don't know how they do it.</p>
  
  <p>CSS</p>
  
  <pre><code>section.products{
      width: 100%;
      padding:5px;
      line-height:100%;
      margin-top: 5px;
      float: left;
      text-align: center;
  }
  img.fans {
      text-align: center;
      max-width: 100%;
      height: 50px;
      width: 50px;
  }
  a {
      color: #000000;
      text-decoration: none;
      font-weight: bold;
  }
  p {
      text-align:center;
      align: center;
  }
  figure {
      display:center;
  }
  ul.fans li{
      display: inline;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;section class="products"&gt;
      &lt;h1&gt;Fans&lt;/h1&gt;
      &lt;p&gt;
          &lt;ul class="fans"&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;figure&gt;
                          &lt;img class="fans" src="images/shrouded.JPG" alt="Shrouded" style="Float"&lt;/img&gt;
                          &lt;figcaption&gt;Shrouded&lt;/figcaption&gt;
                      &lt;/figure&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;
                      &lt;figure&gt;
                          &lt;img class="fans" src="images/shallow_recess.JPG" alt="Shrouded" style="Float"&lt;/img&gt;
                          &lt;figcaption&gt;Shallow Recess&lt;/figcaption&gt;
                      &lt;/figure&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/p&gt;
  &lt;/section&gt;
  </code></pre>