Align Images in your Blog posts

If you find aligning images in your blog posts difficult and you can’t line up your text along side smaller logos or images, you should continue reading.

I will start the post with examples of poorly aligned and nicely aligned images in blog posts.

The following screenshot displays a poorly aligned image in a blog post.

Poorly Aligned Image in Blog post

See how the image wastes precious spaces by not allowing the text to align with the image. Now we observe a nicely aligned image in a blog post.

Nicely Aligned Image in Blog post

See the difference it creates? Plus it adds more to visual appeal of your blog. How to achieve this? Well its a simple edit in your theme’s stylesheet file.

NOTE: Make a backup of your theme’s style.css file before this incase some problem occur you can always revert back to old one.

Open your theme’s style.css file and add the following line at bottom of your css file:

img.right {
float: right;
margin:10px 0 0 10px;
}
img.left {
float: left;
margin:0 10px 10px 0;
}

Now whenever you want to post a small image which you want aligned with text in a post just add class=”right” or class=”left” in <img> tag while writing the post.This code should work on allmost all themes. Worked on this blog’s too. :grin:

Related posts:

  1. Remove Border from smiley images in Wordpress
  2. Get Threaded Comments on your Blog
  3. Fix no bullets on k2 1.0 RC6
  4. Posts to be avoided by a Blogger
  5. Template Changes/Tags for Wordpress 3.0

9 responses to “Align Images in your Blog posts”

  1. Anup

    Your solution works great. Thanks

  2. Katie

    Used this in my blog, but as you can see, although the first paragraph aligns nicely with the image, the second paragraph doesn’t, there’s too much white space… tried adding it onto the end of the first para but it didn’t ‘flow right’ to me…

  3. dhoop

    Hi,
    After an image has been aligned with the top left of a blog post, how can one align an additional image with the bottom right of the same blog post?
    Regards,
    dy

  4. Milos

    Worked like a charm! I used it in my today’s post. Thank you!

  5. Cheeseslave

    Worked perfectly. Thank you!

  6. Steven Snell

    Good information. A lot of themes already have a class for floating images, so if you can find it in your css file you may not have to create a new class. I think with the default Kubrick theme it is .alignright and .alignleft.

  7. tallfreak

    Thanks Nspeaks! I always have to manually type in the html code everytime I want to align text. Now I want have to!

Leave a Reply