Vertical align of image in a div tag

s.
Why would you not prefer something so much simpler along the
lines of:

"http://www.w3.org/TR/html4/strict.dtd">

...

Re: Vertical align of image in a div tag

am 14.11.2007 07:16:56 von dalyea

On Nov 13, 4:16 pm, dorayme wrote:
> In article
> <1194991670.527924.282...@k35g2000prh.googlegroups.com>,
>
>
>
> "dal...@gmail.com" wrote:
> > 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 canalignthings correctly. The li1 tag is supposed toalign
> > 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 verticallyalignthe text, but this technique doesn't
> > work for the image
> > in li1.
>
> > Anyone know how toalignthe image vertically in the middle of the div
> > container?
>
> > Thanks! Code as follows:
>
> >

> >
> >
> >
> >

--
Bone Ur
Cavemen have formidable pheromones.

Re: Vertical align of image in a div tag

am 14.11.2007 20:32:09 von dorayme

In article <1195021016.021680.7480@q5g2000prf.googlegroups.com>,
"dalyea@gmail.com" wrote:

> On Nov 13, 4:16 pm, dorayme
> >
> > "dal...@gmail.com" wrote:
> > > 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 canalignthings correctly. The li1 tag is supposed toalign
> > > the image inside
> > > it vertically inside a 64x64 px container.
> > > Thanks! Code as follows:

> > 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

s.
> > Why would you not prefer something so much simpler along the
> > lines of:
> >
> > > > "http://www.w3.org/TR/html4/strict.dtd">
> >

> >
> > ?
> >
> > --
> > dorayme
>
> Thanks for the reply. The table option is certainly one I considered

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

?

> 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 guess thepart 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.
>

--
dorayme

$5.95

Bike Shop

> >

>
> 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

s.
> Why would you not prefer something so much simpler along the
> lines of:
>
> > "http://www.w3.org/TR/html4/strict.dtd">
>
>
> ...
>
>
>
>

>
>
>
>
>
>

$5.95

Bike Shop

> > src="http://www.aebike.com/images/library/catalogs/soc/p350X 350m/H
> T3200.jpg" width="64" height="18" alt=""> > href="xxx">
Ritchey True grip
> black (HT3200)

11/12/07

>
>
>
> ?
>
> --
> dorayme

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

Re: Vertical align of image in a div tag

am 14.11.2007 07:20:52 von 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

Re: Vertical align of image in a div tag

am 14.11.2007 08:51:45 von Bone Ur

Well bust mah britches and call me cheeky, on Wed, 14 Nov 2007 06:16:56 GMT
dalyea@gmail.com 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.

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.

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.

--
Bone Ur
Cavemen have formidable pheromones.

Re: Vertical align of image in a div tag

am 14.11.2007 10:00:22 von dalyea

On Nov 13, 11:51 pm, Bone Ur wrote:
> Well bust mah britches and call me cheeky, on Wed, 14 Nov 2007 06:16:56 GMT
> dal...@gmail.com 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.
>
> 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.
>
> 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.
>
> --
> Bone Ur
> Cavemen have formidable pheromones.

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

Re: Vertical align of image in a div tag

am 14.11.2007 10:35:57 von Bone Ur

Well bust mah britches and call me cheeky, on Wed, 14 Nov 2007 09:00:22
GMT dalyea@gmail.com scribed:

>> Huh? Your example showed a table!
>>
> 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.

Try something like this:

Ritchey True grip
black (HT3200)