By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,934 Members | 1,441 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,934 IT Pros & Developers. It's quick & easy.

Center alignment for different image sizes

P: 1
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.

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


P: 11
try

Expand|Select|Wrap|Line Numbers
  1. <p><img src="pic.jpg" align="center"/></p>
M
Jun 27 '08 #2

P: 11
or in css use

#center-pic{
margin:auto 0;
}
Jun 27 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.