Centering again

On 30 Mar, 14:13, "Roy A." <royarnes... (AT) gmail (DOT) com> wrote:

On 28 Mar, 02:01, André Hänsel <an... (AT) webkr (DOT) de> wrote:



On Mar 27, 1:19 am, Gary <gs... (AT) yahoo (DOT) com> wrote:

On Mar 24, 5:10 pm, André Hänsel <an... (AT) webkr (DOT) 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... (AT) yahoo (DOT) 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/