Center Span in a table-cell, table-row

Question

I am trying to center the text span in the following table-cell, table-row

<div style="display: table; margin-left: auto; margin-right: auto;">                
   <div style="display: table-cell; width:400px;">
       <div style="display: table-row; text-align: center;">
           <span>
               Test
            </span>
        </div>
    </div>
</div>

jsfiddle ( http://jsfiddle.net/7p3zgne0/ )

Answer 1

table-cell and table-row are inverted.

 <div style="display: table; margin-left: auto; margin-right: auto;"> <div style="display: table-row; width:400px;"> <div style="display: table-cell; text-align: center;"> <span> Test </span> </div> </div> </div> 

Answer 2

It should probably be like this:

<div style="display: table; margin-left: auto; margin-right: auto;">                
  <div style="display: table-row; width:400px;">
    <div style="display: table-cell; text-align: center;">
      <span>
        Test
      </span>
    </div>
  </div>
</div>

Note how the table-cell is inside the table-row . In your code, you have them the other way around.

http://jsfiddle.net/sfcaa3Lk/

Answer 3

<div align="center">
    center aligned content (like a span)
</div>

Apply this to your deepest div node