Centering images with CSS
We’ve covered aligning images to the left and right before, and today I want to talk about centering your images with CSS. If you remember the old way (without the magic of CSS), it was something like this:
<p align="center">centered image here</p>
Look familiar? There’s also:
<center>centered image here</center>
Of course, you don’t want to do that. Both ALIGN and CENTER here are deprecated- and besides, the beauty of CSS is that it’s supposed to make our lives easier, right? Now let’s say I want all of the images in my blog posts to be centered nicely. Instead of having to select each one and applying the dreaded ALIGN or CENTER, all I’d have to do, really, is this:
.post-body img { display: block; margin-left: auto; margin-right: auto }
I want to give you a quick explanation of what we’re doing here. The truth is that although I’ve been using that bit of code for a long time, I never thought to ask exactly how it worked. So here’s what this does:
First, it makes the image into a block – thereby making it unnecessary to add any additional <div> or <p> tags around it. Then it tells the browser displaying it to set left and right margins to auto.
When you set these to “auto”, what you are actually doing is telling the browser that you want left and right margins to be equal – which is really another way of describing centering.
Wasn’t that easy? How do you align your images?
Want an avatar? Get a gravatar! • You can link to this comment
img {display:block ; margin:0 auto ;}
I think this should be standard for everyone here. Nobody should use these deprecated tags anymore. Use shorthand CSS to shrink down your css file size
.
Want an avatar? Get a gravatar! • You can link to this comment
As this is not working with our “friend” IE6 i normally give the div or whereever the img are into text-align:center and then the p, h2 and so on text-align:left.
Want an avatar? Get a gravatar! • You can link to this comment
eeeem, ?
june 2009 and articles “why css is better”?
Try to write more about
margin: 0 auto;
It’s also way to center fixed layout.
Want an avatar? Get a gravatar! • You can link to this comment
emceha, you’ll be surprised at how often I still see the deprecated methods in use. And you’re correct, it’s my favorite way to center a fixed layout as well.
Michael, LOL IE6 is such a good, reliable friend
Markus, thanks- yes, shorthanding the CSS is the way to go!
Want an avatar? Get a gravatar! • You can link to this comment
That is a pretty handy way of centering images and its also what I use usually. There is a problem with it if you have a linked image. It would make the entire width a link, and that isn’t exactly what we want. I’m still trying to figure this myself.
Setting a width and then auto right and left margins would work but I am looking for a way to make all images of different widths center align. Any idea?
Want an avatar? Get a gravatar! • You can link to this comment
Darran, I suggest you check out CSS-Discuss’ page on Centering Block Elements – scroll down to the section titled “When you don’t know the width” in particular. I haven’t tried these methods myself, but it might help you achieve what you’re trying to do.
Want an avatar? Get a gravatar! • You can link to this comment
(
margin: autowill suffice btw.)Want an avatar? Get a gravatar! • You can link to this comment
how about vertical centering? why is it so hard? Am I missing something, or are tables the only true way to center something vertically?
Want an avatar? Get a gravatar! • You can link to this comment
Rich, you’ll find a lot of resources on vertical centering at the link I posted earlier. It isn’t easy, but it’s doable.
Want an avatar? Get a gravatar! • You can link to this comment
I had to look this up just the other day. I too wasn’t sure what the “auto” value was doing. Thanks for explaining!
Want an avatar? Get a gravatar! • You can link to this comment
margin: 0 auto (or just auto) works fine in IE6; it’s IE5 that gets it wrong.
Want an avatar? Get a gravatar! • You can link to this comment
Im use image_assistatnt in drupal. He insert code like that [center][/center] and parse that when publishing (like bbcode)
Want an avatar? Get a gravatar! • You can link to this comment
it will b greate full of you ppl to help others in creating better thing ang CCS
Want an avatar? Get a gravatar! • You can link to this comment
Images should be centered in the parent box
Want an avatar? Get a gravatar! • You can link to this comment
……that’s EXACTLY what margin: 0 auto; does. And if it doesn’t work in your browser, then please stop using IE5.
Also, @ntiremedia: The internet made you stupid. I’m sorry.