WordPress.org

Ready to get started?Download WordPress

Forums

can't center image (7 posts)

  1. giec
    Member
    Posted 2 years ago #

    Hi guys, I wonder if you can help me at all. I run into something a bit odd. On this page http://andys.antonioborrillo.co.uk/wp/?page_id=102 there is a picture that I would like to center. It is wrapped in a div with a class name of andy_pictures:
    here's the html:

    <div class = "andy_pictures">
    <img src="http://andys.antonioborrillo.co.uk/wp/wp-content/themes/twentyeleven-child/images/andy_photo.jpg" alt = "">
    </div><!-- end of andy_pictures-->

    here's the css

    .andy_pictures
    	{
    		border:1px solid red;
    	}
    .andy_pictures img
    	{
    		margin:0 auto;
    	}

    Now for some odd reasons I don't seem to be able to center the image, and for the life of me I can't understand why. Also, what's really odd is that if I replace margin:0 auto; with margin:0 0 0 26px; it actually works fine, so there is something that's blocking the picture to go in the center of the div. ANybody's got a suggestion?
    thanks

  2. Arjen Tienkamp
    Member
    Posted 2 years ago #

    You might have to add 'width' and 'height' to your div.

    Have you tried this:

    .andy_pictures img
    	{
    		margin-right:auto;
                    margin-left:auto;
    	}
  3. giec
    Member
    Posted 2 years ago #

    Hi thanks, but the width and height shouldn't really matter because the div isn't empty. However, I tried just now, assigning a width and height of 90% to the div but it doesn't work. I tried also with the above suggestion but no joy. ANy idea what's going on?

  4. Arjen Tienkamp
    Member
    Posted 2 years ago #

    Hi,

    I think I have the solution.

    Add 'display:block;' to your .andy_pictures img class.

    Let me know if this works.

  5. giec
    Member
    Posted 2 years ago #

    thanks that worked. Now that's a bit odd though, with display:block; we made an image a block element right, so why did this work?
    thanks

  6. Arjen Tienkamp
    Member
    Posted 2 years ago #

    I'm not really sure but I think that 'margin:auto;' cannot be assigned to an object that is not a block element.

    I'm glad that it works, that's most important.

    Have fun and good luck with your website.

  7. giec
    Member
    Posted 2 years ago #

    ok cool thanks for that

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.