title: CSS Horizontal image alignment with image titles
body: <p>Our organization works in a content management system and for expedited reasons we've arranged pictures using tables.  I'd like to get away from that practice and provide a road map (CSS) to doing it properly.</p>
  
  <p>We arrange pictures in a row side-by-side with a title under the picture, normally two lines of text.</p>
  
  <p>Here is an example of what I start constructing.</p>
  
  <pre><code>&lt;style&gt;
  
   #piccaption
   {
  font-size: x-small;
   }
  
   #picimages
   {
   text-align:center;
   margin:0px auto; 
   }
  
  #picimages a
  {
  margin:0px 0px;
  display:inline-block;
  text-decoration:none;
  color:black;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Using this with my HTML...</p>
  
  <pre><code>&lt;div id="picimages"&gt;
  &lt;img alt="Picture ALT" src="http://webaddress.com/picture.jpg" width="140px" height="203px" /&gt;
  &lt;div id="piccaption"&gt;&lt;span&gt;Picture Caption&lt;/span&gt;&lt;br /&gt;
  &lt;span&gt;Second Line&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can someone help me with the proper way to do this as well as place a 2nd, 3rd picture next to this first one with a nice padding between the pictures?</p>
  
  <p>Thanks,</p>
  
  <p>Dave</p>