youngros Posted January 26, 2009 Report Share Posted January 26, 2009 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? Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 26, 2009 Report Share Posted January 26, 2009 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; } Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted January 26, 2009 Report Share Posted January 26, 2009 An image is display inline by default. So text-align:center will center it. Both of these center it everywhere. Sticky Footer at Bottom .center { display:block; margin:0 auto; } p { text-align:center; } Quote Link to comment Share on other sites More sharing options...
youngros Posted January 26, 2009 Author Report Share Posted January 26, 2009 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.