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.
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.
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:
|
1 2 3 4 5 6 7 8 |
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.
September 21, 2011 at 11:27 pm
It did not work for me. Is the information to old?
March 26, 2011 at 12:57 am
Wow.. after spending hours looking for a workaround … this is fantastic! Quick, easy and it works! Thanks!
October 24, 2010 at 9:08 am
Thankyou, this worked perfectly.
September 1, 2010 at 4:38 pm
Your solution works great. Thanks
May 12, 2010 at 8:35 pm
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…
April 26, 2010 at 11:00 pm
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
December 10, 2008 at 1:24 am
Worked like a charm! I used it in my today’s post. Thank you!
December 10, 2008 at 1:31 am
Glad to see it working in your latest post. Just checked it.
November 25, 2008 at 11:19 pm
Worked perfectly. Thank you!
November 25, 2008 at 11:52 pm
Glad to hear that it worked for you. :smile:
September 20, 2007 at 7:25 am
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.
September 17, 2007 at 10:38 pm
Thanks Nspeaks! I always have to manually type in the html code everytime I want to align text. Now I want have to!