title: Vertically align content in inline-block list items
body: <p>I'm trying to display an unordered list horizontally. In each list item, I have an anchor tag with an image, that I'd like to display vertically aligned in the list item. Here's my </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;img src="1.jpg" alt="" height="50" width="50" /&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;img src="2.jpg" alt="" height="50" width="50" /&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;
              &lt;img src="3.jpg" alt="" height="50" width="50" /&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>ul
  {
      margin: 0;
      padding: 0;
      list-style: none;
      height: 93px;
  }
  
  ul li
  {
      display: inline-block;
      width: 110px;
      height: 93px;
      text-align: center;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>What am I doing wrong here?</p>