How to align text on centre of span or div (vertically) like in td?

Question

I like tables since text align is pretty nice there. If we have a text inside a <td> like <td>Sample Text</td> , it doesn't matter how much height the cell have, the text will be vertically aligned on center. The text will be automatically re aligned if there is less space in the cell for the text to accommodate.

But, if I have a span inside the td, having the same height of td , the text will be aligned on top. I can give a fixed padding inside span for the text to align vertically, but then at the time of resizing, it won't pull the text upward inside the cell, leaving a permanent top padding.

What I want is to make the text behave inside a span (which is inside a td), to behave exactly as it is inside a td . Below image describes what I am trying to say;

Here is a demo fiddle , I just want to display text inside span to display exactly as it behaves inside the td .

HTML:

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>Sample Text</td>
    </tr>
    <tr>
        <td>Sample Text rearranged</td>
    </tr>
    <tr>
        <td><span>Sample Text</span></td>
    </tr>    
</table>

CSS:

td{
    border: solid 1px #000;
    height: 40px;
    width: 100px;
}
span{
    height: 40px;
    display: block;
    background: orange;
}

Answer 1

One easy approach is setting a line-height. But this won't work, if you have fluid heights and/or multiple lines of text.

span {
    line-height: 40px;
}

Another way inside the td would be vertical-align: middle; along with removing display: block; . You can set the background color on the td .

td {
    background-color: orange;
}
span {
    vertical-align: middle;
}

Answer 2

You have set display:block to your span that's why it is not vertically centered. Set background for TD instead of SPAN.

Answer 3

You can set this style:

div, span{
  width:100%;
  text-align:center;
  padding-top:5px;
}

Answer 4

set display:table to the parent tag and display:table-cell and vertical-align:middle to the span like this:

DEMO

this works for all elements not just td

HTML

<div>
    <span>
        some text
    </span>
</div>

CSS

div{
    width:100px;
    height:100px;
    background:gold;
    display:table;
}

span{
    display:table-cell;
    vertical-align:middle;
}

Answer 5

I dont really know the wright way, but you can put padding-top. Or use what you said is working. but if you include

line-height:100px; /* the same as your div height */

will work. But if it is just one line. Otherwise you have to include padding, or I think so.

Answer 6

Okay first I must tell you the difference between a div and a span. A div is a block element ( which takes the full width of browser ) while a span is an inline element ( which takes the width of the content )

So when you put a span inside a td, It is not actually taking the full width . So , either you can convert it to div or make the span as display: block;

Now since the width is adjusted now, we must also adjust the height. Since span understands the height of the span as the height of the content, so we give a line height of 40px. ie line-height: 40px; which is the height of the td.

As a summary .. display block is to take the full width and line height is for making the height as much as we want. In our case we made it equal to the td height.

Hope this helps !

span { 
    background: orange;
    line-height: 40px;
    display:block;}

http://jsfiddle.net/f45Sv/8/