Vertical align <span> inside <td>

HTML & CSS
1

Hi guys,

I’m trying to align “middle” <span> tags within <td> vertically. first <span> has following css:

span.key
{
width:24px;
height:10px;
float:left;
}

second one has:

span.fund
{
margin-left:28px;
display:block;
background-color:Black;
}

first <span> is empty and 2nd one contains text. The text seems to be by default align “middle” but first <span> does valign itself to middle inside <td>.

I have also explicitily set

<td style=“vertical-align:middle”>
<span class=“key”></span>
<span class="fund>some text</span>
</td>

but still the result comes out as the one attached image.

Please advice if i’m missing anything in the css to get both <span> tags display in the middle of <td>

2

Hi,

The vertical align applies to the td (cell) and not the content within the cell itself. It will vertically align the cell with other cells. The content will also be in the middle of the cell but not vertically aligned with respect to other content in that same cell. i.e(the content as whole will be vertically aligned within that cell.)

To vertically align individual elements you would need to put them in separate cells.


td {vertical-align:middle}



<table>
    <tr>
   <td ><span class="key"></span> </td> 
   <td><span class="fund">some text</span> </td>
    </tr>
</table>
3

thanks Paul this works fine now.

4

The vertical-align property only applies to inline boxes (and table cells). One of your span classes is using float:left and the other display:block, which means neither box is inline anymore. Thus vertical-align won’t apply to them, since they will not be rendered inside a line box.