Center alignment for different image sizes

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

 
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>

Jun 26 '08 #1

Subscribe Post Reply

2136

sharkyboy

try

Expand|Select|Wrap|Line Numbers

<p><img src="pic.jpg" align="center"/></p>

Jun 27 '08 #2

sharkyboy

or in css use

#center-pic{
margin:auto 0;
}

Jun 27 '08 #3

Similar topics

center image in div

by: steven | last post by:

Hi, I'm trying to center an image in a div, both horizontally and vertically. (Each div holds a thumbnail image.) Here's the HTML: <div class="thumb"> <div> <img src="tn_02-2022.jpg" />...

HTML / CSS

Byte Alignment

by: Shashi | last post by:

Can somebody explain how the byte alignment for structures work, taking the following example and considering: byte of 1 Byte word of 2 Bytes dword of 4 Bytes typedef struct { byte a; word...

C / C++

Why runtime alignment could be useful

by: Clint Olsen | last post by:

I did a Google about this, and I've seen this covered quite a few times - some leading to useful tricks with offsetof() to discern alignment and others using a big-union of intrinsic types to...

C / C++

pointer alignment

by: j0mbolar | last post by:

for any pointer to T, does a pointer to T have different or can have different alignment requirement than a pointer to pointer to T? if so, where is the exact wording in the standard that would...

C / C++

alignment revisited

by: puzzlecracker | last post by:

> 2) >>struct B >>{ >> int i; >>short int si; >> char c; >> char d; >> int j; >>};

C / C++

struct alignment

by: rassuls | last post by:

Can anyone explain what is meant by alignment in data structure in C language. What happens internally by changing the align value. Thanks in advance. Russell

C / C++

How to Create PcitreBox that adjust to different Image sizes

by: Al | last post by:

Hi, I would like to create a PictureBox that can adjust to any image sizes and show scrollbars when necessary to allow user to scroll to different part of image. I have tried to use Panel with...

Visual Basic .NET

datagrid Header Center

by: Jose | last post by:

Please como center a datagrid header and the data justify to right? Thanks a lot

Visual Basic .NET

Center-Aligning elements

by: gaijinco | last post by:

I was a hobbist web coder for years but I had to sidestep for a while. Now I'm trying to return to it and I'm trying to clarify how am I supposed to do somethings with CSS v.s. HTML and I'm...

HTML / CSS

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++