Posted by dalyea@gmail.com on 11/13/07 23:36

I have the following code which is supposed to show, in 4 columns, the
price,
web site, image + product name, and date. The 3rd column uses div
tags so
that I can align things correctly. The li1 tag is supposed to align
the image inside
it vertically inside a 64x64 px container. When an image is less than
64px in
height, though, it aligns to the top of container. I figured out how
to use the p
tag in li2 to vertically align the text, but this technique doesn't
work for the image
in li1.

Anyone know how to align the image vertically in the middle of the div
container?

Thanks! Code as follows:


<table class=tbl00>
<tr>
<td class=mt>$5.95</td>
<td class=lt>Bike Shop</td>
<td class=lt>
<div class=li1><a href="xxx"><img src="http://www.aebike.com/images/
library/catalogs/soc/p350X350m/HT3200.jpg" width=64 height=18 border=1
alt=""></a></div><div class=li2><a href="xxx"><p>Ritchey True grip
black (HT3200)</p></a></div></td>
<td class=mt>11/12/07</td></tr>
</table>



..tbl00 {
padding: 0px;
background-color: #FFF;
}

..lt {
font-family: "Trebuchet MS", Arial;
font-size: 13px;
color: #000;
text-align: left;
padding-left: 4px;
}

..mt {
font-family: "Trebuchet MS", Arial;
font-size: 13px;
color: #000;
text-align: right;
padding: 0 4px 0 2px;
}

div.li1 {
width: 64px;
height: 64px;
float: left;
vertical-align: middle;
}

div.li2 {
margin-left: 76px;
height: 64px;
vertical-align: middle;
text-align: left;
}

div.li2 p {
line-height: 64px;
}

• Next in forum: Re: Hiding emailaddress from the HTML source code
• Prev in forum: Re: Page centered in IE7 but not in FF2.0
• Thread view: Vertical align of image in a div tag

[Reply to this message]