Centering an Image
<div align="center"> is deprecated.
It’s been deprecated for a long time, but it keeps creeping up for things like center aligning an image.
Another popular way to do this is to wrap an extra div around the image and set the text alignment to center. This creates (as you might know, I hate), an added layer of XHTML code that you really don’t need.
.image-wrap{
text-align:center;
}This goes back to one of my pet peeves about using too many divs. Here’s what I came up with:
CSS
#content-main img{
display:block;
width:auto;
margin:auto;
}That will center your image, and of course you can add a class in if you don’t want all your images centered.
Just a quick tip today, as I’m getting back into the swing of things after vacation. I hope everyone had a good holiday season.
Both comments and pings are currently closed.
« This Week in Links 12/16 | Where I Get My News »
|
Comments (6)
|
hi great post this wil certaily come handy, a few timesi tries to center images inside a div i gave up trying.
i idea on the compatbility of this in ie6,7,ff and safari?
Hi Paris, I haven’t noticed any cross browser issues with this technique
I think there is a problem with IE5 (remember IE5 mac :p) which needs a parent set with ‘text-align:center’ for the ‘margin:auto’ to work.
I just don’t code anymore for IE6 :p
I have no IE5 by me, do you ?
I know, this was has ended
You’re right, there is an IE5 problem with centering. I don’t have any stats on that browser though. I think we can safely drop support, and it degrades pretty gracefully
I have used that same technique before. It’s very handy indeed. Also I have to agree that we can definitely stop supporting IE5 on any platform.
It's good.
Thanks.
enjoy