Vertical align of image in a div tag

D

dalyea

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;
}
 
D

dorayme

"[email protected] said:
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
Click to expand...

I snip rest and styles...
I suggest you get rid of *all* your styles (there are many faults
with it), all your classes bar one, all your divs, all your <p>s.
Why would you not prefer something so much simpler along the
lines of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>...</title>
<style type="text/css">
table{border-collapse: collapse;}
td {border:2px solid #000; padding: .4em;}
..picItemCell {text-align: center;}
</style>
</head>
<body>
<table cellspacing="0" summary="bike items and prices etc...">
<tr>
<td>$5.95</td>
<td>Bike Shop</td>
<td class="picItemCell">
<a href="xxx"><img
src="http://www.aebike.com/images/library/catalogs/soc/p350X350m/H
T3200.jpg" width="64" height="18" alt=""></a><a
href="xxx"><br>Ritchey True grip
black (HT3200)</a></td>
<td>11/12/07</td></tr>
</table>
</body>
</html>

?
 
D

dalyea

I snip rest and styles...



I suggest you get rid of *all* your styles (there are many faults
with it), all your classes bar one, all your divs, all your <p>s.
Why would you not prefer something so much simpler along the
lines of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>...</title>
<style type="text/css">
table{border-collapse: collapse;}
td {border:2px solid #000; padding: .4em;}
.picItemCell {text-align: center;}
</style>
</head>
<body>
<table cellspacing="0" summary="bike items and prices etc...">
<tr>
<td>$5.95</td>
<td>Bike Shop</td>
<td class="picItemCell">
<a href="xxx"><img
src="http://www.aebike.com/images/library/catalogs/soc/p350X350m/H
T3200.jpg" width="64" height="18" alt=""></a><a
href="xxx"><br>Ritchey True grip
black (HT3200)</a></td>
<td>11/12/07</td></tr>
</table>
</body>
</html>

?
Click to expand...

Thanks for the reply. The table option is certainly one I considered
and actually
have been using for the longest time. But I have 2,000+ such item
files that take
up 78M of disk space, and I am trying to cut down not only disk space
usage
but also speed up delivery of my pages. By using the div tags alone
instead of
tables, I cut my page size total down to 67M for the 2,000+ files.

But that aside, the point of my post was missed in your response, and
that is
that I wish to display every row in the table at exactly 64px in
height, and that
the images in the table will not always be 64px or greater in size.
(I have written
the code obviously to do the simple math scaling to keep image
proportional and
at or under 64px in size.) If an image is 47px x 30px, then that
image will rest
at the top of the li1 div container, and I want it to be vertically
centered in the middle
of the div container (hence the subject line of my post). I guess the
part I left out
is that the image sizes vary widely and that this is not a 1 row
table.

If I can't figure this out with CSS (which would be sad - admitting
defeat!) then, yes,
I will use the table approach - tried and true, works in every
browser. Was just hoping
to accomplish this with (apparently bad?!) CSS as I wrote (why is my
CSS so wrong?).

Thanks again for your response and your code suggestion, much
appreciated.

David
 
D

dalyea

By the way, the solution I came up with so far after googling around
for about an hour is this:

div.ii1 {
width: 50px;
height: 50px;
float: left;
display: table-cell;
vertical-align: middle;
}

div.li1 img {
vertical-align: middle;
}

* html .li1 {
font-size: 44px;
}

It works in IE, but not Firefox. I tried a few other cumbersome
solutions, but this one
actually worked, made sense to me, and was fairly compact. It's just
the part about
it not working in other browsers which makes it incomplete.
Tables.... ugh.

David
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Wed, 14 Nov 2007 06:16:56 GMT
(e-mail address removed) scribed:
Thanks for the reply. The table option is certainly one I considered
and actually
have been using for the longest time. But I have 2,000+ such item
files that take
up 78M of disk space, and I am trying to cut down not only disk space
usage
but also speed up delivery of my pages. By using the div tags alone
instead of
tables, I cut my page size total down to 67M for the 2,000+ files.
Click to expand...

Huh? Your example showed a table!
But that aside, the point of my post was missed in your response, and
that is
that I wish to display every row in the table at exactly 64px in
height, and that
the images in the table will not always be 64px or greater in size.
(I have written
the code obviously to do the simple math scaling to keep image
proportional and
at or under 64px in size.) If an image is 47px x 30px, then that
image will rest
at the top of the li1 div container, and I want it to be vertically
centered in the middle
of the div container (hence the subject line of my post). I guess the
part I left out
is that the image sizes vary widely and that this is not a 1 row
table.
Click to expand...

Get the image out of a div and directly in the cell, then vertical
centering is easy (and, btw, the default). Whatever other alignment you
need, work on that afterwards.
 
D

dalyea

Well bust mah britches and call me cheeky, on Wed, 14 Nov 2007 06:16:56 GMT
(e-mail address removed) scribed:


Huh? Your example showed a table!




Get the image out of a div and directly in the cell, thenvertical
centering is easy (and, btw, the default). Whatever other alignment you
need, work on that afterwards.
Click to expand...

My example has a surrounding table, but the third cell has two
elements which must
appear side by side - hence the 2 div tags.

col 1 - price
col 2 - web site
col 3 - image + name of product
col 4 - date

So it's col 3 about which I posted. In it, I could use a table, of
course, but I was hoping
to use div tags instead. I want the whole td to be 64px in height,
but I'm controlling that
by setting each div tag to 64px in height. The first div tag li1 will
be the container for
the image, which I want vertically aligned. (And of course, that's
for any arbitrarily sized
image, notably those under 64px in height.) The second div tag li2 is
easy - it's just text.

Thanks for weighing in - hopefully this clarifies the problem at hand.

David
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Wed, 14 Nov 2007 09:00:22
GMT (e-mail address removed) scribed:
My example has a surrounding table, but the third cell has two
elements which must
appear side by side - hence the 2 div tags.

col 1 - price
col 2 - web site
col 3 - image + name of product
col 4 - date

So it's col 3 about which I posted. In it, I could use a table, of
course, but I was hoping
to use div tags instead. I want the whole td to be 64px in height,
but I'm controlling that
by setting each div tag to 64px in height. The first div tag li1 will
be the container for
the image, which I want vertically aligned. (And of course, that's
for any arbitrarily sized
image, notably those under 64px in height.) The second div tag li2 is
easy - it's just text.

Thanks for weighing in - hopefully this clarifies the problem at hand.
Click to expand...

Try something like this:

<td><a href="xxx"><img src="images/image.jpg" alt="" style="vertical-
align:middle"></a><a href="xxx" style="margin-left:.5em">Ritchey True grip
black (HT3200)</a></td>
 
D

dorayme

"[email protected] said:
I suggest you get rid of *all* your styles (there are many faults
with it), all your classes bar one, all your divs, all your <p>s.
Why would you not prefer something so much simpler along the
lines of:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

?
Click to expand...

Thanks for the reply. The table option is certainly one I considered[/QUOTE]

I was suggesting to simply do your whole job with the markup I
gave (this was not meant to be saying to put a table withing the
cell you were concerned about... you say things which suggest
maybe you think I was so suggesting? I don't understand all your
remarks "against" tables. You have a tabular data project and so
what is all this 'disowning' about?

True, to be fair to you, I was riding a little roughshod over the
particular thing you wanted; really saying, forget about fiddling
about with so many styles, so many fonts with px dimensions, so
many px sizing of your boxes (divs and cells); there are problems
with the latter. The markup I suggest will get the job done in
the simplest way and it will look fine, it will be easy to
maintain.

Is there something in particular that you find unacceptable about
something like:

http://netweaver.com.au/test/tableDalyea.html

?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align img inside nav tabs section 5
Clickable Div Block 1
Image shifts to the right when export the page to pdf 4
vertical align - form in a cell 5
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
<Button ...> display is fine, except for two things 1
I Need Help with making a function that draws in a canvas using location data. 1
Having trouble centering contents of td ? 3

Members online

No members online now.
Total: 34 (members: 0, guests: 34)
Robots: 659

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top