[RESOLVED] Issues with Image Centering

[Leebah]

Generally, I've found centering a div to be as easy as setting margin-right and margin-left to auto.

I'm trying to center and image, inside the div class="listing", which is inside the div id="maincontent", which is inside the body with id="onecolumn". The margins set to auto didn't seem to work so I currently have this. It's still not centered and I've been staring at it so long that I'm just not seeing what's wrong.


body {
background-color: #5f7f4c;
position: relative;
font-family: Arial, Helvetica, sans-serif;
background-attachment: scroll;
background-image: url(../images/background.gif);
background-repeat: repeat;
}
#maincontent {
font-size: 1em;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #CCB777;
background-image: none;
min-width: 500 px;
border: 1px solid #CCB777;
}
#onecolumn #maincontent{

width: 80%;
left: auto;
right: auto;
position: relative;
margin-right: auto;
margin-left: auto;
}
.listing {
color: #FFF;
background-color: #4c3320;
width: 230px;
position: relative;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
margin: 5px;
}
.listing img {
height: 198px;
width: 198px;
border: 1px solid #ccb777;

[Excavatorak]

Hello Leebah,
To center an element, you need 3 things -

1. a DocType Declaration
2. an element with a width
3. that elements left/right margins set to auto

For margin:0 auto; to work on an image you need to make it a block level element.
Add display:block; and the margin will work.

[Leebah]

Thank you!