title: text-align:center Not working properly on absolute positioned spans
body: <p>I need to place 2 <code>&lt;span&gt;</code> inside a <code>&lt;div&gt;</code>, the first span must be placed on top, the second one on bottom, like North-South.</p>
  
  <p><img src="https://i.stack.imgur.com/gDpot.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div&gt;
      &lt;span class="north"&gt;N&lt;/span&gt;
      &lt;span class="south"&gt;S&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To do this, I thought about using <code>position:absolute;</code> on the 2 <code>&lt;span&gt;</code>.</p>
  
  <pre><code>div
  {
      display:inline-block;
      width: 20px;
      position:relative;
      height:100px;
  }
  .north
  {
      position:absolute;
      top:0;
  }
  .south
  {
      position:absolute;
      bottom:0;
  }
  </code></pre>
  
  <p>Now, the spans should be positioned to the left (default), to center them, I used:</p>
  
  <pre><code>div
  {
      text-align:center;
  }
  </code></pre>
  
  <p>But I got this:</p>
  
  <p><img src="https://i.stack.imgur.com/thiKK.png" alt="enter image description here"></p>
  
  <p>Check it out : <a href="http://jsfiddle.net/Zn4vB/" rel="noreferrer">http://jsfiddle.net/Zn4vB/</a></p>
  
  <p>Why is this Happening?</p>
  
  <p>Note: I cannot use margins, left, right, because the contents of those spans are different, I just need to align them properly in the center.</p>