[RESOLVED] CSS vertical align issues

[Kudose]

'ello all.

I am looking to have a table row 30 pixels in height, with a 16px x 16px image followed by a clip of text.

I need the text to align in the middle of the cell, not the baseline.

I've tried the following CSS, but it seems as if the text ignores the vertical align. I don't see any text properties that could help ... anyone have any ideas?

table.box {
border:1px solid #000;
width:535px;
margin:10px 25px 0px 25px;
}

tr.boxTitle {
background-color:#EEE;
border-bottom:#000;
color:#000;
padding:5px;
font-weight:bold;
height:30px;
}

td.vMiddle {
vertical-align:middle;
}

td.pad5 {
padding:5px;
}

<table class="box" cellspacing="0" cellpadding="0">
<tr class="boxTitle">
<td class="pad5 vMiddle"><img src="<{$site.fqdn}>sd-image-tpl.php?name=cog&type=png&tpl=sd-admin" border="0" alt="<{$configuration}>" />&nbsp;<{$configuration}></td>
</tr>
<tr>
<td class="pad5">
Text
</td>
</tr>
</table>

TIA!

[NogDog]

You need to assign the vMiddle class to the text cell's <td> (or just assign it to the <tr> if you want it to apply to the entire row's td elements).

[Kudose]

You need to assign the vMiddle class to the text cell's <td> (or just assign it to the <tr> if you want it to apply to the entire row's td elements).

I thought I did with:

<td class="pad5 vMiddle"><img src="<{$site.fqdn}>sd-image-tpl.php?name=cog&type=png&tpl=sd-admin" border="0" alt="<{$configuration}>" />&nbsp;<{$configuration}></td>

<{$configuration}> is a Smarty variable with the text in it.

The other cell with "Text" in it is just a place holder.

Thanks for your reply though. :)

[NogDog]

Ah...I see, or rather, I didn't see that there was text in that cell.

td.vMiddle, td.vMiddle img {
vertical-align:middle;
}

[Kudose]

Who's the man?

NogDog!

Thanks. :)