Results 1 to 3 of 3

Thread: [RESOLVED] Issues with Image Centering

  1. #1
    Join Date
    Feb 2010

    resolved [RESOLVED] Issues with Image Centering

    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;

  2. #2
    Join Date
    Feb 2010
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  3. #3
    Join Date
    Feb 2010
    Thank you!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center