[Solved] Centering an image

[rosie281]

Hi guys, sorry for asking probably a really obvious question. I’ve googled a lot and found answers for my question but I haven’t really worked with CSS before so I’m struggling to put the pieces together myself!

I’ve been trying to center an image in a blog post. In the actual post it appears centered, but on the main page (before the blog post is expanded) it appears on the left. I figured out I could float left/right and that would work, but I’m yet to find a way to center it, as I know you can’t do that with float. (Have tried using text-align but didn’t work, probably for obvious reasons to everyone except me lol)

Here’s the code:

img {
max-width:60%;
height:auto;
border:0;
}

Many thanks.

(Er…tried to use CodePen incase that helps anyone know what I’m talking about http://codepen.io/anon/pen/gpLBjE.css)

[Paulie_D]

If this is all you have

img {
max-width:60%;
height:auto;
border:0;
}

then you can just add

margin: auto and it may center…or text-align:center on the parent element.

We really need to see a live link or more HTML & CSS to help further.

[rosie281]

Thank you, the display:block/margin: 0 auto seemed to do the trick! I’ve been trying to figure that out for days. Brilliant, cheers :)

[rosie281]

Thanks Paulie D, I’d tried both of those (although had no idea what I was doing so possibly didn’t do it correctly :P) Atelierbram’s suggestion seems to have done the trick.

[Author]

Posts