Aligning Images The Right Way Using CSS
Thursday, March 6th, 2008 6:54 am by
TDH 
Print this page 
Comment 
Share This
Images are great for blog posts and chunks of text in general. Even if they're just remotely relevant, they'll add some space and make the content more accessible. You want to spice your texts up with images.
You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.
Like the one on the right here, using the following code:
-
<img src="TheImageLocation.jpg" alt="My Image Description" align="right" vspace="15" hspace="15" />
Nice huh?
Well, it could be better. You see, using the align="right" floats the image to the right, but the vspace and hspace values are around the full image, which looks a little weird with the right side of the image not being in line with the content's right side.
Like so:
What you should do is use CSS to float your images instead. Add these classes to your stylesheet:
-
.align-right { float:right; margin: 0 0 15px 15px; }
-
.align-left { float:left; margin: 0 15px 15px 0; }
The margin will make sure that there's no space where it isn't needed, in other words, you won't get that nasty spacing problem like the one in the image above.
Use it like this:
-
<img src="TheImageLocation.jpg" alt="My Image Description" class="align-right" />
While we're at it, why not add this to the stylesheet as well:
-
.frame { padding: 5px; border: 1px solid #aaa; }
Now you can add the frame class to your images for a nice looking border around your images. So if we want to float an image to the right with a border, we'll do it like this:
-
<img src="TheImageLocation.jpg" alt="My Image Description" class="align-right frame" />
Take a look to the right. There you have it, floating correctly and all, looking a lot better than the first one, right?
You know what the best part with this is? If you're a WordPress users, this is version 2.5 compliant code. They've finally switched to using CSS for aligning images, about time I'd say.
There you have it, easy handling of images, looking a little better, and being a lot more flexible should you want to change spacings, border colors and such.
I'm a designer, writer, and blogger who's been working professionally online since 1998. Since then I've survived dotcom, published magazines, books, and lots of websites. See more posts by 
First time here, or frequent flyer. Whatever the case may be, we highly recommend 
I would get a little more specific when you are applying the frame
img.frame { styling }
Good little article outlining better use for CSS for beginners.
Not only can this method of approach be used for images, but all areas of html/css. Play around, get a feel for what limitation you may or may not have.
Nick, you’re right, however I like to be able to apply classes across the board when they’re as general as these, and as Dan notes you can add these element anywhere.
I use this method already, albeit with id’s rather than classnames. Just lets me reduce a few letters (typing out class is larger)
TDH - I was just arguing for the sake of arguing hehe (Good general CSS article).
Sumesh - I don’t necessarily agree with using IDs in place of classes for general styling to save space. The W3C defines an ID as “a unique identifier to an element”.
^^ especially if you decide to use more than one image on the page and then IDs are all wrong. Class is an extra 3 letters and so I would say it is NOT worth the possible problems.
btw great article..
You sir are a genius.
With exquisite simplicity you have solved a problem which many have obfuscated. Thanks very much.
What about centring images! the text-align property is a bit weird when used with images surely..
oh god.. just figured it out forget it lol
Nick, agree with you. use ID to identify an element, and use class to apply styling to an element, it makes more sense..
anyway, when using this technique, dont forget to mention about “clearing” the float(s). 1 entry could have left, right or centered align images, so..EasyClearing come to the rescue!
Hi, i have some images with links in my blog, i put the codes to add every image, but by default all of them are aligned up to down and i would like to align them one and other to the right or left side. can you help me please?
http://img181.imageshack.us/img181/250/imag11tf5.png