Center alignment for different image sizes

  • purc
  • Born
  • Born
  • purc
  • Posts: 1

Post 3+ Months Ago

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: [ Select ]

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>
  1. css
  2. body {
  3.     font-family: Arial, Helvetica, sans-serif;
  4.     font-size: 100%;
  5.     background-color: #000000;
  6.     margin: 0 auto;
  7.     padding: 0 0 0 0em;
  8. }
  9. #container {
  10.     width: 801px;
  11.     height: 600px;
  12.     background-color: #FFFFFF;
  13.     border: 1px solid #9f9e9e;
  14.     margin:0 auto;
  15. }
  16. #body {
  17.     width: 799px;
  18.     height: 460px;
  19.     margin: 1px 1px 1px 1px;
  20. }
  21. #body_left {
  22.     width: 306px;
  23.     height: 458px;
  24.     background-image: url(../images/body_left.jpg);
  25.     border: 1px solid #9d9c9c;
  26.     float: left;
  27.     margin:0px 1px 0px 0px;
  28. }
  29. #body_right {
  30.     width: 488px;
  31.     height: 458px;
  32.     background-color: #d5ded6;
  33.     border: 1px solid #9d9c9c;
  34.     float: left; 
  35.     margin:0px 0px 0px 0px;
  36. }
  37. .img_wrapper {
  38.     background: url("../images/picture_background.gif") no-repeat bottom right;
  39.     float: left;
  40.     
  41. }
  42. .img_wrapper img { 
  43.     background-color: #FFFFFF;
  44.     border: 1px solid #504e4e;
  45.     padding: 4px 4px 4px 4px;
  46.     margin: 0 auto;
  47.     position: relative;
  48.     right: 3px;
  49. }
  50. HTML
  51. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  52. <html xmlns="http://www.w3.org/1999/xhtml">
  53. <head>
  54. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  55. <title>dora vorosmarty</title>
  56. <link href="css/stylessheet.css" rel="stylesheet" type="text/css" />
  57. </head>
  58. <body>
  59.     <div id="container">
  60.         <div id="body"> 
  61.             <div id="body_left">
  62.             </div>
  63.             <div id="body_right">
  64.                 <div class="img_wrapper">
  65.                     <img src="images/img01.jpg" />
  66.                 </div>
  67.             </div>
  68.         </div>
  69.     </div>
  70. </body>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

You could just change "body-right"'s text-align to center ...

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 74 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.