title: Two span element does not align vertically
body: <p>I have two <code>span</code> element inside a <code>div</code> to align at the middle of the <code>div</code>.</p>
  
  <pre><code>&lt;div class="position"&gt;
      &lt;span class="yours"&gt;Your current position：&lt;/span&gt;
      &lt;span class="name"&gt;New York&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>.position{
    height:70px;
    background-color:gray;
  }
  .position span{
    line-height:70px;
  }
  .position .name{
    font-size:28px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/WDfyr/">Live Demo</a></p>
  
  <p>As you can see, the <code>span.yours</code> is not at the middle.</p>
  
  <p>And if I remove the style:</p>
  
  <pre><code>.position .name{
    font-size:28px;
  }
  </code></pre>
  
  <p>It will work.</p>
  
  <p>What's the problem?</p>