Discussion: Centering again
Afficher un message
Vieux 08/04/2008, 01h11   #11
Roy A.
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Re: Centering again

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>
  Réponse avec citation
 
Page generated in 0,07026 seconds with 9 queries