Hi,

I have <div><a><img /></a></div>. The dimensions of the div are fixed.

I want the image centered and at the bottom.

Isn't there another way than this ugly thing?
<div><table height="100%" width="100%" cellspacing="0" cellpadding="0"
border="0" valign="bottom" align="center"><tr><td><a><img /></a></td></
tr></table></div>

Regards,
André

On Mar 24, 5:10 pm, André Hänsel <an...@webkr.de> wrote:
> Hi,
>
> I have <div><a><img /></a></div>. The dimensions of the div are fixed.
>
> I want the image centered and at the bottom.
>
> Isn't there another way than this ugly thing?
> <div><table height="100%" width="100%" cellspacing="0" cellpadding="0"
> border="0" valign="bottom" align="center"><tr><td><a><img /></a></td></
> tr></table></div>
>
> Regards,
> André

The big thing in this group is give a URL not code.

I am new at CSS but what I have done is

<div style="margin: 0 auto; width: 10em;">
<img src="/img/image.gif" alt="image">
</div>

with the width being the width of the image. I don't remember why I
didn't
roll the style into the img tag and do away with the div, I'll try
that next time.

Gary

On Mar 27, 1:19 am, Gary <gs...@yahoo.com> wrote:
> On Mar 24, 5:10 pm, André Hänsel <an...@webkr.de> wrote:
>
> > Hi,
>
> > I have <div><a><img /></a></div>. The dimensions of the div are fixed.
>
> > I want the image centered and at the bottom.
>
> > Isn't there another way than this ugly thing?
> > <div><table height="100%" width="100%" cellspacing="0" cellpadding="0"
> > border="0" valign="bottom" align="center"><tr><td><a><img /></a></td></
> > tr></table></div>
>
> > Regards,
> > André
>
> The big thing in this group is give a URL not code.

No problem.
http://kundenweb.creations.de/usenet/css/center.htm

I want the image centered horizontally and vertically in the box. It
should work in IE6, too.

Regards,
André

Andre

If the below link was supposed to show the image centered both ways,
sorry, it didn't work in either IE7 or Firefox. ????


On Thu, 27 Mar 2008 17:01:49 -0700 (PDT), André Hänsel
<andre@webkr.de> wrote:

>On Mar 27, 1:19 am, Gary <gs...@yahoo.com> wrote:
>> On Mar 24, 5:10 pm, André Hänsel <an...@webkr.de> wrote:
>>
>> > Hi,
>>
>> > I have <div><a><img /></a></div>. The dimensions of the div are fixed.
>>
>> > I want the image centered and at the bottom.
>>
>> > Isn't there another way than this ugly thing?
>> > <div><table height="100%" width="100%" cellspacing="0" cellpadding="0"
>> > border="0" valign="bottom" align="center"><tr><td><a><img /></a></td></
>> > tr></table></div>
>>
>> > Regards,
>> > André
>>
>> The big thing in this group is give a URL not code.
>
>No problem.
>http://kundenweb.creations.de/usenet/css/center.htm
>
>I want the image centered horizontally and vertically in the box. It
>should work in IE6, too.
>
>Regards,
>André

jACK wrote:
> Andre
>
> If the below link was supposed to show the image centered both ways,
> sorry, it didn't work in either IE7 or Firefox. ????

While you're at it, ask the OP why he is unable to size all his images
to the same dimensions and why the unmentioned image cycling?

--
Gus

On 28 Mar, 02:01, André Hänsel <an...@webkr.de> wrote:
> On Mar 27, 1:19 am, Gary <gs...@yahoo.com> wrote:
>
>
>
> > On Mar 24, 5:10 pm, André Hänsel <an...@webkr.de> wrote:
>
> > > Hi,
>
> > > I have <div><a><img /></a></div>. The dimensions of the div are fixed.
>
> > > I want the image centered and at the bottom.
>
> > > Isn't there another way than this ugly thing?
> > > <div><table height="100%" width="100%" cellspacing="0" cellpadding="0"
> > > border="0" valign="bottom" align="center"><tr><td><a><img /></a></td></
> > > tr></table></div>

> > The big thing in this group is give a URL not code.
>
> No problem. http://kundenweb.creations.de/usenet/css/center.htm
>
> I want the image centered horizontally and vertically in the box. It
> should work in IE6, too.

You could use "display: table-cell; vertical-align: middle"

To make it work in legacy browsers you have to use a table with one td
element.

Maybe you could use a background image:

.box {
width: 400px; height: 300px; display: block;
background: fuchsia url('catcycle.jpg') no-repeat 50% 50%
}

<div>
<a blass="box" href="javascript: alert('Meow!');"></a>
</div>

You should use at proper doctype:
<http://www.w3.org/QA/2002/04/valid-dtd-list.html>

On Mar 30, 2:13 pm, "Roy A." <royarnes...@gmail.com> wrote:
> On 28 Mar, 02:01, André Hänsel <an...@webkr.de> wrote:
>
> > On Mar 27, 1:19 am, Gary <gs...@yahoo.com> wrote:
>
> > > On Mar 24, 5:10 pm, André Hänsel <an...@webkr.de> wrote:
>
> > No problem. http://kundenweb.creations.de/usenet/css/center.htm
>
> > I want the image centered horizontally and vertically in the box. It
> > should work in IE6, too.
>
> Maybe you could use a background image:

That's a good idea for centering the image. Unfortunately the link
doesn't work yet.

On Mar 30, 6:29 am, Gus Richter <gusrich...@netscape.net> wrote:
> jACK wrote:
> > If the below link was supposed to show the image centered both ways,
> > sorry, it didn't work in either IE7 or Firefox. ????
>
> While you're at it, ask the OP why he is unable to size all his images
> to the same dimensions and why the unmentioned image cycling?

You don't talk to me?

I didn't mention the image cycling because it is irrelevant for the
problem. It's just there to avoid inappropriate answers like "set the
width of blabla to 123px then it is centered".

André Hänsel wrote:
> On Mar 30, 6:29 am, Gus Richter <gusrich...@netscape.net> wrote:
>> jACK wrote:
>>> If the below link was supposed to show the image centered both ways,
>>> sorry, it didn't work in either IE7 or Firefox. ????
>> While you're at it, ask the OP why he is unable to size all his images
>> to the same dimensions and why the unmentioned image cycling?
>
> You don't talk to me?

Because I might revert to the vernacular.

> I didn't mention the image cycling because it is irrelevant for the
> problem.

Was not so irrevelent for me. I took the time to set up something and
when testing it I noticed the different size images cycled. I dropped
any attempt to assist further.

> It's just there to avoid inappropriate answers like "set the
> width of blabla to 123px then it is centered".

Why couldn't you mention it beforehand with ALL pertinent information?
I'm out of this thread.

--
Gus

On Apr 2, 12:02 am, Gus Richter <gusrich...@netscape.net> wrote:
> André Hänsel wrote:
> > On Mar 30, 6:29 am, Gus Richter <gusrich...@netscape.net> wrote:
> >> jACK wrote:
> >>> If the below link was supposed to show the image centered both ways,
> >>> sorry, it didn't work in either IE7 or Firefox. ????
> >> While you're at it, ask the OP why he is unable to size all his images
> >> to the same dimensions and why the unmentioned image cycling?
>
> > You don't talk to me?
>
> Because I might revert to the vernacular.
>
> > I didn't mention the image cycling because it is irrelevant for the
> > problem.
>
> Was not so irrevelent for me. I took the time to set up something and
> when testing it I noticed the different size images cycled. I dropped
> any attempt to assist further.
>
> > It's just there to avoid inappropriate answers like "set the
> > width of blabla to 123px then it is centered".
>
> Why couldn't you mention it beforehand with ALL pertinent information?
> I'm out of this thread.

Sorry for knocking over your effort. I thought, I implicitly said that
I don't know the width of the image by not saying that I knew it. Also
it's quite obvious that centering an image with KNOWN dimensions is no
problem AT ALL.

On 30 Mar, 14:13, "Roy A." <royarnes...@gmail.com> wrote:
> On 28 Mar, 02:01, André Hänsel <an...@webkr.de> wrote:
>
>
>
> > On Mar 27, 1:19 am, Gary <gs...@yahoo.com> wrote:
>
> > > On Mar 24, 5:10 pm, André Hänsel <an...@webkr.de> wrote:
>
> > > > Hi,
>
> > > > I have <div><a><img /></a></div>. The dimensions of the div are fixed.
>
> > > > I want the image centered and at the bottom.
>
> > > > Isn't there another way than this ugly thing?
> > > > <div><table height="100%" width="100%" cellspacing="0" cellpadding="0"
> > > > border="0" valign="bottom" align="center"><tr><td><a><img /></a></td></
> > > > tr></table></div>
> > > The big thing in this group is give a URL not code.
>
> > No problem. http://kundenweb.creations.de/usenet/css/center.htm
>
> > I want the image centered horizontally and vertically in the box. It
> > should work in IE6, too.
>
> You could use "display: table-cell; vertical-align: middle"
>
> To make it work in legacy browsers you have to use a table with one td
> element.

It seems that I've may have misread your question. To center the image
at the bottom of the div element you could
add a inner div element:

<style type="text/css">
.box { width: 400px; height: 300px; background-color: fuchsia;
position: relative }
.box div { position: absolute; width: 100%; bottom: 0; text-align:
center }
.box img { vertical-align: top; border: 0 }
</style>

<div class="box">
<div>
<a href="meow.php" onclick="alert('Meow!'); return false"><img
src="catcycle.php" /></a>
</div>
</div>

If you use this extra div element, you can center your image
vertically with the following css:

<style type="text/css">
.box { width: 400px; height: 300px; background-color: fuchsia;
position: relative }
.box div { position: absolute; width: 100%; top: 50%; text-align:
center; }
.box img { vertical-align: top; border: 0; position: relative; top:
-50% }
</style>

On 26 mar, 20:19, Gary <gs...@yahoo.com> wrote:


> The big thing in this group is give a URL not code.
>
> I am new at CSS but what I have done is
>
> <div style="margin: 0 auto; width: 10em;">
> <img src="/img/image.gif" alt="image">
> </div>


Gary,
your code snippet will center the div within its containing block but
it will not center the image within that div.

More on this:

Interactive demo on CSS horizontal alignment and horizontal formating
when to use margin-left, margin-right and when to use text-align
http://www.gtalbot.org/NvuSection/Nv...Alignment.html

Regards, Gérard
--
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/