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

Code:

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

Code:

<style type="text/css">
<!--
div#fullView {
     width: 100%;
     text-align:center;
}
div#fullView img {
     margin: 0 auto;
}
// -->
</style>

content in the body tag

Code:

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

Thread: Center alignment for different image sizes

Thread Tools

Search Thread

Center alignment for different image sizes

Bookmarks

Bookmarks

Posting Permissions