Feature
Post

Category
Code


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?


  1. By Markus Thömmes posted on June 15, 2009 at 5:02 pm
    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 ;).

  2. By Michael posted on June 15, 2009 at 5:59 pm
    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.

  3. By emceha posted on June 15, 2009 at 7:12 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    eeeem, ?
    june 2009 and articles “why css is better”? :D

    Try to write more about
    margin: 0 auto;

    It’s also way to center fixed layout.

  4. By Lorraine Nepomuceno posted on June 15, 2009 at 8:40 pm
    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!

  5. By Darran posted on June 16, 2009 at 10:47 am
    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?

  6. By Lorraine Nepomuceno posted on June 16, 2009 at 1:52 pm
    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.

  7. By Jens Meiert posted on June 16, 2009 at 6:10 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    (margin: auto will suffice btw.)

  8. By Rich posted on June 16, 2009 at 8:29 pm
    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?

  9. By Lorraine Nepomuceno posted on June 16, 2009 at 8:50 pm
    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.

  10. By Eric Roberts posted on June 17, 2009 at 6:03 pm
    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!

  11. By John Faulds posted on June 18, 2009 at 6:24 am
    Want an avatar? Get a gravatar! • You can link to this comment

    As this is not working with our “friend” IE6

    margin: 0 auto (or just auto) works fine in IE6; it’s IE5 that gets it wrong.

  12. By photographer posted on July 3, 2009 at 10:29 pm
    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)

  13. By ntiremedia posted on July 9, 2009 at 5:33 am
    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

  14. By Bradford Sherrill posted on August 4, 2009 at 3:38 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Images should be centered in the parent box

  15. By Dave posted on August 13, 2009 at 6:19 am
    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.

  16. TrackbackMax Design - standards based web design, development and training » Some links for light reading (16/6/09)Mastering CSS, Part 1: Styling Design Elements | CSS | Smashing MagazineMastering CSS, Part 1: Styling Design Elements « Tech7.NetWordpress Blog Services - Mastering CSS, Part 1: Styling Design ElementsAMB Album » Mastering CSS, Part 1: Styling Design ElementsShopping Mall » Mastering CSS, Part 1: Styling Design ElementsMyfreepedia.com » Blog Archive » Mastering CSS, Part 1: Styling Design ElementsAdvertisers Blog » Mastering CSS, Part 1: Styling Design ElementsMastering CSS, Part 1: Styling Design Elements | YABIBO.COM - YOUR WEB WORLD精通 CSS 造型设计元素(三)» Mastering CSS, Part 1: Styling Design Elements endo – luxury coding全面掌握CSS系列一:为设计元素添加样式效果(译文) « 日落旅馆精通 CSS 造型设计元素 | 芒果精通CSS造型设计元素精通 CSS 样式设计元素 - 菠菜博精通 CSS 造型设计元素 Mastering CSS - E@生活在别处精通 CSS 样式设计元素 - 木牛工作室