title: Text Align Center in Chrome (webkit)
body: <p>Any idea why <code>text-align: center</code> doesn't center the text within the table cells? But <code>text-align: -webkit-center</code> does?</p>
  
  <p>The reason why <code>display: table-cell</code> is applied is to have <code>vertical-align</code> to work. Removing it is not a solution and doesn't answer my question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
      text-align: center;
  }
  .column {
      width: 33%;
      display: inline-block;
      text-align: center;
      /*text-align: -webkit-center;*/
      border: 1px solid gray;
      float: left;
  }
  span {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      width: 50px;
      height: 50px;
      background-color: gray;
      border-radius: 25px;
  }
  span:before {
      content: "text"
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
      &lt;div class="column"&gt;
          &lt;span&gt;&lt;/span&gt;        
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;span&gt;&lt;/span&gt;        
      &lt;/div&gt;
      &lt;div class="column"&gt;
          &lt;span&gt;&lt;/span&gt;        
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>