www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Issues with Image Centering

  1. #1
    Join Date
    Feb 2010
    Location
    CT
    Posts
    14

    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
    Location
    Alaska
    Posts
    39
    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.

  3. #3
    Join Date
    Feb 2010
    Location
    CT
    Posts
    14
    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



Recent Articles