Horizontal centring images

I am facing a small CSS problem: I have a page with some blocks of content, of which I don’t know the contents on beforehand. Therefore all blocks — defined by div elements — have the same definition. If the block contains text, it has to be left aligned; if the block contains an image, it has to be horizontally centred.
In the good ol’ HTML era, I would simply add `align=”center”` to the img element, and I would be done. But with CSS, the only way to centre an image is with `text-align: center;` to the parent element of the image. But this is impossible, since I don’t know the contents on beforehand.
What I would want is to apply a certain style depending on the child element; something like: `div < img {text-align:center}`. Since this kind of instructions do not exist, I will probably have to use some kind of JavaScript hack to accomplish what I want — or does anybody know a better solution?

7 thoughts on “Horizontal centring images”

  1. OK, cool, but does this work for other elements as well, like <p> – tags and stuff? And what is that expression? Looks very Javascript’ish, but it isn’t I guess! Is it just something you can do with CSS 2?
    Oh, and sorry for the double post… Your plug-in preventing double posts (or several submit’s directly after each other) worked well, only it didn’t prevent the comment actually being posten double! Anyway, sorry 😉

  2. I was just going to suggest the same as Chriz, as I also recently needed this for a redesign of a website I was doing. It really works brilliantly in IE, even in IE 5.5 (not in 5.x though). And the ‘display:block;’ is not always neccessary. The redesign I did turned a table-layout hell to neatly ordered nested div’s. Some of them needed to be horizontally centered. Works like magic – who needs tables?
    Furthermore I’ve discovered a way to also vertically centre an element:
    .container { height:262px; margin:0 auto; text-align:center; width:573px; }
    .containertext { margin:4px; left:1px; padding:2px; position:relative; top:40%; }
    <div class=”container”>
    <p class=”containertext”>Text…</p>
    </div>
    It’s all in the percentage of the last element!

  3. I was just going to say the same, it works brilliantly in IE, even in IE 5.5 (not in 5.x though). And the ‘display:block;’ is not always neccessary. I’ve also implemented this in a redesign of a website I’ve done, where several nested div’s all needed to be horizontally centered. Furthermore I’ve discovered a way to also vertically centre an element:
    .container { height:262px; margin:0 auto; text-align:center; width:573px; }
    .containertext { margin:4px; left:1px; padding:2px; position:relative; top:40%; }
    <div class=”container”>
    <p class=”containertext”>Text…</p>
    </div&gt
    It’s all in the percentage of the last element!

  4. It does indeed work in Mozilla, but in my test file I forgot to set any attribute for the image element (no src/width). In that case Mozilla doesn’t know the element width, and doesn’t center the image… Opera and IE don’t care about the missing image source and center the image.

  5. div img {
    margin: 0 auto;
    display: block;
    }
    Works fine in IE/win and Opera, but not in Mozilla (Firefox) though…

Comments are closed.