can't center image

  • Hi guys, I wonder if you can help me at all. I run into something a bit odd. On this page https://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="https://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

Viewing 6 replies - 1 through 6 (of 6 total)

  • You might have to add ‘width’ and ‘height’ to your div.

    Have you tried this:

    .andy_pictures img
	{
		margin-right:auto;
                margin-left:auto;
	}
    Thread Starter giec

    (@giec)

    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?

    Hi,

    I think I have the solution.

    Add ‘display:block;’ to your .andy_pictures img class.

    Let me know if this works.

    Thread Starter giec

    (@giec)

    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

    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.

    Thread Starter giec

    (@giec)

    ok cool thanks for that

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘can't center image’ is closed to new replies.