Member Avatar for purc

Hi Guys,

I have a huge problem. I'd like to put my images to the middle of a div. Every image has a different size (It would be a gallery).
I have tried several solutions, but none worked.

My biggest problem is the pictures have a shadow, so I have to take them and their shadow also in the middle.

Thanks

css:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #000000;
    margin: 0 auto;
    padding: 0 0 0 0em;
}

#container {
    width: 801px;
    height: 600px;
    background-color: #FFFFFF;
    border: 1px solid #9f9e9e;
    margin:0 auto;
}

#body {
    width: 799px;
    height: 460px;
    margin: 1px 1px 1px 1px;
}

#body_left {
    width: 306px;
    height: 458px;
    background-image: url(../images/body_left.jpg);
    border: 1px solid #9d9c9c;
    float: left;
    margin:0px 1px 0px 0px;
}

#body_right {
    width: 488px;
    height: 458px;
    background-color: #d5ded6;
    border: 1px solid #9d9c9c;
    float: left;    
    margin:0px 0px 0px 0px;
}

.img_wrapper {
    background: url("../images/picture_background.gif") no-repeat bottom right;
    float: left;   
}

.img_wrapper img {   
    background-color: #FFFFFF;
    border: 1px solid #504e4e;
    padding: 4px 4px 4px 4px;
    margin: 0 auto;
    position: relative;
    right: 3px;
}


HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>dora vorosmarty</title>
<link href="css/stylessheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">
        <div id="body">    
            <div id="body_left">
            </div>
            <div id="body_right">
	             <div class="img_wrapper">
	                <img src="images/img01.jpg"  />
	            </div>
            </div>
		</div>
    </div>
</body>
  • 2 Contributors
  • 1 Reply
  • 165 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MidiMagic

Here's what I use:

<style type="text/css">
.cenx {text-align: center;}
.bxfix {margin: 0; border: none; padding: 0;}
.ceni {clear: both;}
img {padding: 4pt;) /* set to what you want */
</style>

....

<div class="cenx bxfix">
   <img src="im.jpg alt="Imagetocenter" class="ceni" />
</div>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.