Centreing images

[youngros]

I am trying to centre an image using the following css

 

img.center {

display: block;

margin-left: auto;

margin-right: auto;

}

 

followed by the html

 

 

but the image sticks resolutely to the left.

 

What am I doing wrong please?

[Wickham]

It's probably because the p tag that it's inside is only using as much width as it needs so the image in centering in a space which is just the same width and set on the left.

 

Add a width: 100%; to the p tag and see if that cures it.

 

 

and just for safety add the image width and height to the class:-

img.center {

display: block;

margin-left: auto;

margin-right: auto;

width: 450px; height: 319px;

}

[PicnicTutorials]

An image is display inline by default. So text-align:center will center it. Both of these center it everywhere.

 

.center {

display:block;

margin:0 auto;

}

p {

text-align:center;

}

 

[youngros]

Discovered the problem is that the text for the div is set to justify, so won't allow the picture to centre. It does centre with Wickams method though, but that would mean having to set the css for other pictures that I would wish to centre.