title: Spacing in <li> tags with display table-cell
body: <p>I've four <code>li</code> tags and they all contains images in it. Now, I want to show images vertically center and for this I've used <code>display: table-cell</code> for all <code>li</code> and on image I've used vertical-align middle. But margin isn't working when I am trying to put spacing between li's. </p>
  
  <p>Here is the <a href="http://jsfiddle.net/8WENN/" rel="noreferrer">JSFiddle</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="achievements"&gt;
       &lt;h2&gt;Our &lt;span&gt;Achievements&lt;/span&gt;&lt;/h2&gt;
  
      &lt;ul&gt;
          &lt;li&gt;
              &lt;img src="images/award-1.png"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="images/award-2.png"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="images/award-3.png"&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;img src="images/award-4.png"&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.achievements ul {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  .achievements ul li {
      min-width: 304px;
      min-height: 208px;
      vertical-align: middle;
      display: table-cell;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-shadow: 0px 0px 3px #aaa;
      color: #000;
      margin-right: 14px;
      padding-bottom: 32px;
      max-width: 303px;
      background: #fff;
      font-family:'gafata';
      padding-top: 32px;
      line-height: 23px;
      text-align:center;
  }
  .achievements ul li img {
      vertical-align: middle;
  }
  </code></pre>