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?
Categories:
Webdev7 Comments
Leave a comment
0 TrackBacks
Listed below are links to blogs that reference this entry: Horizontal centring images.
TrackBack URL for this entry: http://mt.ai-no.com/mt-tb.cgi/400
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 ;-)