Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    images dont listen to margins

    have a problem.
    I want to center my page and was told to put my margins as {margin-right: auto; margin-left: auto;} I have done this and my text centers in the middle of the page. my images however do not do this.

    my css looks like this:

    #containertext {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    }

    #green {
    top: 390;
    left: 120;
    }

    #carbon {
    top: 270;
    left: 480;
    }

    #lib {
    top: 255;
    left: 210;
    }

    #yougov {
    top: 250
    }

    #iraq {
    top: 390;
    left: 380;
    }

    #bodytext {
    top: 20;
    }

    #green, #carbon, #lib, #yougov, #iraq, #header, #bodytext {
    position: absolute;
    }

    and i have put a division with the id of "container" around the whole page.
    Does anyone have the answer?

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    Could you post the page code or link to it so we can see how the images are set?

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Images are inline elements—which don't respond to margins—and so you need to declare them block-level elements first…

    Code:
    img {
     display: block;
     margin: 0 auto;
    }
    Hope this helps…

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Quote Originally Posted by rmedek View Post
    Images are inline elements—which don't respond to margins—and so you need to declare them block-level elements first…

    Code:
    img {
     display: block;
     margin: 0 auto;
    }
    Hope this helps…
    Thanks that was really helpful.


  •  

    Posting Permissions

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