Margin: 0 auto is not centering my image

Question

I\'m very new to all of this and am trying to build this website, but the main image on the page is not centering. I\'ve tried all sorts of centering things but they don\'t work

Answer 1

Put display: block; on it. By default, images are inline.

Answer 2

You have two options:

1. Remove img from #pictures and then put the image inside that div.

2. Add the #pictures to the image Tag in html (inline style).

You might remove the display tag in #pictures.

Good luck with that.

Answer 3

#pictures img{
display:block;
}

Add this code then i will be centered

Answer 4

To center inline —default for image— or inline-block elements, just center it as text. This means, you will need to use text-algin on the parent element:

div#pictures {
  text-align: center;
}

The other solution is the one from @One Trick Pony, and display the image as a block element and just then apply the automatic margin.

Answer 5

i know this is an old post, but wanted to share how i solved the same problem.

My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.