Center alignment for different image sizes [Archive]

View Full Version : Center alignment for different image sizes

purc

06-26-2008, 06:23 PM

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>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>

boogyman

06-26-2008, 06:34 PM

if you are displaying a gallery you should probably have "thumbnails" that are aligned in some type of grid and then have the ability to look at each image individually on a larger scale, whether that be through the use of a new template page or a mouse over even?

in any case having the images of varying sizes in one grid is not usually that conducive to positive feedback.

if you do have that aligned properly and you are just having difficulty with that additional template page, try something like this

styles in the head tag

<style type="text/css">

</style>

content in the body tag

<div id="fullView">
<img src="" width="" height="" alt="">
</div>

filling in the fields appropriately

purc

06-26-2008, 09:26 PM

Thanks boogyman,

Thanks for your answer. Unfortunately, it didn't work :(

jscheuer1

06-27-2008, 03:09 AM

Please post a link to the page on your site that contains the problematic code so we can check it out.