Problems centering a drop-shadowed image in css

Forum Moderators: not2easy

Message Too Old, No Replies

Problems centering a drop-shadowed image in css

Using a cool drop shadowing css technique, can't center an image

CodyZ

11:33 pm on Nov 19, 2006 (gmt 0)

I found a cool drop-shadow CSS technique located here:
http://www.#*$!.com/articles/cssdropshadows/
a l i s t a p a r t
(not sure why it won't display the url, but that's what's missing)

I want to incorporate the technique into my site, but the drop-shadowed image always displays on the left side of the page, how can I get it to center? Thanks so much, and yes I'm a noob with this.

here's the code I'm using:

<html>
<head><title>Picture of a Cat</title>
<STYLE TYPE="text/css">

.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right!important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px!important;
margin: 10px 0 0 5px;
}

.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}

</style>
</head>

Setek

2:12 am on Nov 21, 2006 (gmt 0)

You have

float: left;

applied to

.img-shadow

. This means it will always float to the left-hand side :)

It depends - because you're working with a block-level element, you could keep it floated, but use auto margins (ex. 1) to extend the margin of the element and center it.

Example 1

.img-shadow { ...
margin: 10px auto; }However, if IE6 is in quirks mode, the auto margins won't work - you'll also have to make use of their incorrect render of [code]text-align

on block-level elements (ex. 2.)

Example 2

.container { text-align: center; }
.container .img-shadow { ...
margin: 10px auto; }

<div class="container">
<div class="img-shadow">
<img src="neatcat.jpg" title="This is a cat" alt="Image of a cat" />
</div>
</div>

Auto margins are the best way to horizontally center block-level elements - but you have to use it in conjunction with

text-align

mis-usage if IE6 is in quirks mode.

Hope that clears things up :)