www.webdeveloper.com
Results 1 to 7 of 7

Thread: Image won't center with margin: auto

  1. #1
    Join Date
    Apr 2010
    Posts
    24

    Image won't center with margin: auto

    Hi everyone.

    I'm building a website, and I've run into the problem that for some reason, putting margin-left: auto and margin-right: auto will not center images like it's supposed to, and I was wondering if someone could tell me what I'm doing wrong.

    As an example, you can look at this page:
    http://heroofcamelot.com/legend/death_of_arthur.php

    The last two images are supposed to be centered, but they float to the left for some reason. Firebird tells me that the only CSS affecting them is:

    Code:
    #main_content img {
        margin: 0.5em;
    }
    hoc.css (line 121)
    .bottom {
        vertical-align: top;
    }
    hoc.css (line 163)
    .center {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    hoc.css (line 158)
    Inherited frombody
    body {
        color: #FF0000;
        font: 85% Verdana,Kalimati,sans-serif;
    }
    I can't understand what I'm doing wrong. Any ideas?

  2. #2
    Join Date
    Apr 2010
    Posts
    24
    Just wanted to add one update:

    I've discovered that by manually adding style = "margin-left: auto; margin-right: auto;" it causes the image to be centered. But because I'm using class = "center" (and I defined .center in my CSS file), it doesn't work.

    The really weird thing is that I've added borders and stuff to verify that the .center class is being loaded. And I've also scanned the rest of my CSS file to make sure there's nothing that would be overriding the margins. AND Firebird also doesn't list anything that would be overriding them. And yet the image STILL won't center, and I've tested this in both IE and FF.

    And before you ask, yes, everything validates!

  3. #3
    Join Date
    Apr 2010
    Posts
    24
    And after some more pulling out of my hair, I've discovered this line was the problem:

    Code:
    #main_content img {
      margin: 0.5em;
    }
    main_content is the div where I keep each page's main content (the stuff that's that "page" as opposed to the navigation bars that appear on every page, etc.).

    So now, I understand that setting a margin automatically applies it to all four margin-top margin-bottom margin-left and margin-right properties. But two things:
    1. I placed my .centered class after the #main_content img section, and I thought CSS was supposed to overwrite previous values. So why was this an issue?
    2. Does anyone have a solution for how I can specify that I want all my images to have a margin of 0.5em, while still being able to use my .centered class to specifically center images I want centered? I can't use padding, because some of my images have borders, and that would cause the padding to appear inside the border, making them look weird.

  4. #4
    Join Date
    Aug 2011
    Location
    Hong Kong
    Posts
    49
    I have the exact problem too! unfortunately i am not an expert of css so i can't explain the margin auto problem

    but i do know how to solve your problem (probably in a stupid way)

    use a div, and in its css use the text-align:center property
    then put your img inside the div


    Again, I think it is a stupid way because the margin auto should do the trick easy and clean, so hopefully there is someone here can ENLIGHTEN me

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    margins are the property of the block-level elements, and they can not be applied upon inline element. IMG is considered an inline element.

    So, either you nest that image within a DIV (with the same height and width) and give that DIV margins auto, or you give that image a display block and give it the margins auto. The former is recommended.

    There is also a third possibility. Make that image as being a background-image for the element inside you want it to be centered, and position the background to be in center.

  6. #6
    Join Date
    Apr 2010
    Posts
    24
    Ah, thanks. That's what I was afraid of. My website is already designed, so adding margins will mean I have to edit every page to place every image inside its own div. I had no idea img was an inline element. The W3C people should really create a way to control the layout of your imgs without having to put them in a div.

    If I can solve my question #1 of why main_content img {margin: 0.5em} is overpowering my lower margin-left: auto and margin-right: auto, I may be able to make this work without having to edit every page. Any ideas why that line is overpowering the lower line? I thought lower lines were supposed to take precedence. Particularly if they're specified as part of a class, and not just a standard img element.

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    My advice is to use pixels, not em whenever it comes about size, margins, padding, etc. em is a relative measurement unit, and the reference is from parent to child, thus 0.5 em might look different in different parts of you document, or if you make later a change in the DOM structure.

    Use em only for font-size, if you think you need that. And even so, take care to give a firm font-size in pixels for the ultimate parent, usually the body.

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