468,104 Members | 1,297 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,104 developers. It's quick & easy.

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

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

....
<tr style="height:40">
...
<td colspan="1" rowspan="2" align="left" valign="top"
style="overflow:hidden;">
...contents.explained.later...
</td>
...
</tr>
<tr style="height:136">
...
</tr>
....

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

<div style="width:94px; height:106px; vertical-align:middle;
text-align:center"><img src="...not.important.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
Jul 20 '05 #1
1 8227
Ka*************@gmx.net (Kai Grossjohann) wrote:
I have a table which contains a top-aligned table cell:

<tr style="height:40">
You're missing the units. Is that 40 nanometers or 40 lightyears?
<td colspan="1" rowspan="2" align="left" valign="top"
style="overflow:hidden;">
...contents.explained.later...
</td>
...
</tr>
<tr style="height:136">
...
</tr>
...

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

<div style="width:94px; height:106px; vertical-align:middle;
text-align:center"><img src="...not.important.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.infosystems.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/>
Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by Ben Gribaudo | last post: by
7 posts views Thread by Dario de Judicibus | last post: by
8 posts views Thread by localhost | last post: by
3 posts views Thread by Josef K. | last post: by
4 posts views Thread by Alan Silver | last post: by
2 posts views Thread by Nikolai Onken | last post: by
28 posts views Thread by Kent Feiler | last post: by
nathj
5 posts views Thread by nathj | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.