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 Comments

div img {
margin: 0 auto;
display: block;
}

Works fine in IE/win and Opera, but not in Mozilla (Firefox) though...

Thanks Chriz! It works like a charm, even in Firefox (I put display before margin).

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.

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>

It's all in the percentage of the last element!

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!

For a smarter way to centre images vertically, have a look at: http://ultimorender.com.ar/funkascript/beta/css/vertical_center.htm

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 ;-)

Leave a comment

mensuales Archives

Recent Entries

  • Manifiesto «En defensa de los derechos fundamentales en internet»

    Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información...

  • Commenting not possible

    I just discovered that it currently is not possible to comment on this blog. At first sight it looks like the problem is caused...

  • Back from the CeBIT

    I am back from the CeBIT show. Actually, I came back on Monday, but have been too busy to post. This year has been...

  • Downloading viruses?

    I just saw the screen above, which is the ClamWin antivirus software uploading its virus database. On the left hand side they have an animation...

  • New: Google Notebook

    I know that Spain usually lags behind the rest of the world, but Google Spain really doesn't know what is going on. While all...

Close