<td style="text-align: right; vertical-align: middle;">

What I found was that when I took the style out of inline and into the style sheet, it breaks.

<td class="caption">

/* CSS code */
.caption {
text-align: right;
vertical-align: middle;
}

Now, if I were to make it an ID selector, it still breaks:
<td id="column_caption">

/* CSS code */
#column_caption {
text-align: right;
vertical-align: middle;
}

This doesn’t work, even though I am explicit in the element in which I want to align. After Googling for the answer I came across something that got me thinking. Maybe I needed to add context to the CSS. The following works:

<td id="column_caption">

/* CSS code */
table td#column_caption {
text-align: right;
vertical-align: middle;
}

You can now notice that adding “table td” in front of the ID selector gives it context. I’m not sure why, but this was the only solution that worked, allowing me to put my style information into the CSS file instead of inline. Now, there is a HUGE (IMHO) drawback: since I am using the ID selector I now have to explicitly reference every cell I want to have these attributes. Thus, I could have something like this:

<table>
<tr>
<td id="column_caption"> </td>
<td> </td>
</tr>
<tr>
<td id="column2_caption"> </td>
<td> </td>
</tr>
... more rows here
</table>


/* CSS code */
table td#column_caption,
table td#column2_caption,
... more columns referenced here {
text-align: right;
vertical-align: middle;
}

Therefore, I can use CSS to make it easier to edit the style, but it is still tedious to have to ID every cell.

Does anyone else have a workaround better than this?

Sean

/* Using ‘class=”alignright”‘ on an image will (who would’ve thought?!) align the image to the right. And using ‘class=”centered”‘, will of course center the image. This is much better than using align=”center”, being much more futureproof (and valid) */

It had never occured to me that there would be a need for this since I had always used the css align="center" attribute.

I guess it pays to look at someone else’s CSS file. :-)