title: Inline images with captions centered under each?
body: <p>How would I display multiple images on the same line, and put captions centered under each one using HTML/CSS?</p>
  
  <p>Here's what I currently have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="iconbox"&gt;
         &lt;div id="tut-icon"&gt;&lt;p&gt;&lt;img src="images/tuticon.png" alt="Written Tutorials" /&gt;Some text&lt;/p&gt;&lt;/div&gt;
         &lt;div id="vid-icon"&gt;&lt;p&gt;&lt;img src="images/vidicon.png" alt="Video Tutorials" /&gt;Some text&lt;/p&gt;&lt;/div&gt;
         &lt;div id="add-icon"&gt;&lt;p&gt;&lt;img src="images/addtuticon.png" alt="Add Tutorials" /&gt;Some text&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.iconbox {
  height: 128px;
  padding: 20px;
  display: inline;
  }
  
  #tut-icon, #vid-icon, #add-icon {
  text-align: center;
  width: 128px;
  }
  
  #tut-icon img, #vid-icon img, #add-icon img {
  display: inline-block;
  }
  </code></pre>
  
  <p>Here's a JSFiddle for the code: <a href="http://jsfiddle.net/swiftsly/24m7L/" rel="nofollow">http://jsfiddle.net/swiftsly/24m7L/</a></p>