Put vertically centered <div> inside a top-aligned table cell

[Kai Grossjohann]

I have a table which contains a top-aligned table cell:

....
<tr style="height:4 0">
...
<td colspan="1" rowspan="2" align="left" valign="top"
style="overflow :hidden;">
...contents.exp lained.later...
</td>
...
</tr>
<tr style="height:1 36">
...
</tr>
....

Inside that table cell I have a <div> which is centered:

<div style="width:94 px; height:106px; vertical-align:middle;
text-align:center">< img src="...not.imp ortant.now..." alt="An
image"></div>

The image is less than 94px tall and less than 106px wide, so there
should be some room between the top of the table cell and the top of
the image. But both IE6 and Mozilla 1.4 show the image top-aligned in
the table cell.

I could make more rows with less height such that some of them have a
combined height of 106px, and then put my image in a table cell
spanning just those rows. But for reasons I'm too embarrassed to
expand upon :-) I'd rather avoid making those extra rows.

So can I perhaps replace the div with something else to achieve the
desired effect? I'd like to specify that the image is centered in a
region 106px tall, and that region should be in a table cell 176px
(row of 40px plus row of 136px) tall?

tia,
Kai

[Steve Pugh]

Ka************* @gmx.net (Kai Grossjohann) wrote:

I have a table which contains a top-aligned table cell:

<tr style="height:4 0">
You're missing the units. Is that 40 nanometers or 40 lightyears?
<td colspan="1" rowspan="2" align="left" valign="top"
style="overflo w:hidden;">
...contents.exp lained.later...
</td>
...
</tr>
<tr style="height:1 36">
...
</tr>
...

Inside that table cell I have a <div> which is centered:

<div style="width:94 px; height:106px; vertical-align:middle;
text-align:center">< img src="...not.imp ortant.now..." alt="An
image"></div>
vertical-align doesn't apply to block level elements. Read the CSS
specs for details.
The image is less than 94px tall and less than 106px wide, so there
should be some room between the top of the table cell and the top of
the image. But both IE6 and Mozilla 1.4 show the image top-aligned in
the table cell.
You've told the browser to align the contents of the cell to the top
with valign=top in your HTML, so that's what the browsers are doing.
So can I perhaps replace the div with something else to achieve the
desired effect? I'd like to specify that the image is centered in a
region 106px tall, and that region should be in a table cell 176px
(row of 40px plus row of 136px) tall?

Do you know the height of the image? If you do then you can align it
by applying margin-top to the image or padding-top to the cell.

Followups set to comp.infosystem s.www.authoring.stylesheets

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net > <http://steve.pugh.net/>