CODEWITHSUNDEEP
htmlcss
user2158259
user2158259

Reputation: 137

Center Span in a table-cell, table-row

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/ )

Upvotes: 0

Views: 507

Answers (3)

rnrneverdies
rnrneverdies

Reputation: 15667

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>

Upvotes: 3

Alfonso
Alfonso

Reputation: 2296

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/

Upvotes: 2

Freestyle076
Freestyle076

Reputation: 1556

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

Apply this to your deepest div node

Upvotes: 0

Related Questions