title: Aligning images in a row with text below each image
body: <p>In short, I'm trying to achieve a design similar to this:</p>
  
  <p><img src="https://i.stack.imgur.com/LSRBj.png" alt="mock up of design"></p>
  
  <p>Where the white boxes are images, and the red brushes are lines of text (the top line would hold a name and underneath their specialty) but using divs has proven to be problematic as I can't get the content to line up in a proper row - I'm not too keen on using a table for something like this due to compatibility problems, so I'm hoping someone on here would be able to assist me in trying to get it to work with divs before I fall back to that.</p>
  
  <p>Below is the code I have so far and a jsfiddle accompaniment.</p>
  
  <pre><code>&lt;div id="design-cast"&gt;
       &lt;h4&gt;Design&lt;/h4&gt;
  
      &lt;div class="member"&gt;
          &lt;img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" /&gt;
          &lt;div class="name"&gt;Name
              &lt;br /&gt;Description&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="member"&gt;
          &lt;img src="http://i.imgur.com/OBUL7se.jpg" class="img-responsive img-thumbnail" alt="Responsive image" /&gt;
          &lt;div class="name"&gt;Name
              &lt;br /&gt;Description&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="member"&gt;
          &lt;img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" /&gt;
          &lt;div class="name"&gt;Name
              &lt;br /&gt;Description&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.member {
      display: inline;
  }
  .name {
      display: inline;
  }
  .member img {
      width: 13%;
      display: block;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MhRnz/" rel="nofollow noreferrer">jsfiddle</a></p>