title: CSS vertical alignment of inline/inline-block elements
body: <p>I'm trying to get several <code>inline</code> and <code>inline-block</code> components aligned vertically in a <code>div</code>. How come the <code>span</code> in this example insists on being pushed down? I've tried both <code>vertical-align:middle;</code> and <code>vertical-align:top;</code>, but nothing changes.</p>
  
  <p><strong>HTML:</strong>  </p>
  
  <pre><code>&lt;div&gt;
    &lt;a&gt;&lt;/a&gt;&lt;a&gt;&lt;/a&gt;
    &lt;span&gt;Some text&lt;/span&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS:</strong>  </p>
  
  <pre><code>a {
      background-color:#FFF;
      width:20px;
      height:20px;
      display:inline-block;
      border:solid black 1px;
  }
  
  div {
      background:yellow;
      vertical-align:middle;
  }
  span {
      background:red;
  }
  </code></pre>
  
  <p>​
  <strong>RESULT:</strong><br>
  <img src="https://i.stack.imgur.com/CN2F0.png" alt="enter image description here"></p>
  
  <p><strong><a href="http://jsfiddle.net/TFPx8/2/" rel="noreferrer">FIDDLE</a></strong>  </p>