[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]

NogDog wrote:

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[color=red], td.vMiddle img[/color] {
  vertical-align:middle;
}

[Kudose]

Who's the man?

NogDog!

Thanks. 🙂