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:
[css] img.right {
float: right;
margin:10px 0 0 10px;
}
img.left {
float: left;
margin:0 10px 10px 0;
}[/css]
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.

12 Comments


  1. Wow.. after spending hours looking for a workaround … this is fantastic! Quick, easy and it works! Thanks!


  2. 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. 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. Worked like a charm! I used it in my today’s post. Thank you!


    1. Glad to see it working in your latest post. Just checked it.


  5. Worked perfectly. Thank you!


    1. Glad to hear that it worked for you. :smile:


  6. 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. Thanks Nspeaks! I always have to manually type in the html code everytime I want to align text. Now I want have to!

Comments are closed.