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 code:
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 code:
<!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>s</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>