Sunday, 7 September 2014

Tagged under: , ,

How to align pictures in a post

How to align photo in Blogger
Have you noticed that it is not easy to align pictures horizontally in a post in Blogger? Have you ever tried to align 2 or more pictures?

If you try to adjust the position of each image using the alignment options proposed by Blogger (left, right, center), it does not work. Why is that? and how can we align images properly in a post?



 How to align pictures in a post?


First, let's expose the problem with an example. If you upload three photos, edit their properties, align the first one on the left, center the second one and align the third one one the right, here is what you get:

How to align photo in Blogger
How to align photo in Blogger
How to align photo in Blogger


















Why don't the pictures align? Here is the code Blogger generates when a picture is inserted in a post:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-icAv6KLchws/VAwmuU0WLqI/AAAAAAAAAP0/jgxoe5QmwpQ/s1600/how-to-align-photos-part1.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">

<img border="0" src="http://1.bp.blogspot.com/-icAv6KLchws/VAwmuU0WLqI/AAAAAAAAAP0/jgxoe5QmwpQ/s1600/how-to-align-photos-part1.JPG" height="320" width="94" />
</a>
</div>


As you can see, a <div>  tag with "clear: both" style property is inserted automatically by Blogger. This property forbids other HTML elements (in this case other photos) to 'float' on either side of the photo. As a result, each photo is surrounded by a pair of <div>  and </div> tags of which, the CSS style prevents alignment.

The solution is therefore simple, removing some of the <div ...>  and </div> tags that have been added between the pictures during their insertion will do the trick. We'll leave the first   tag and the last   tag to be sure that nothing else will float on either side of our three pictures, and here is the result :


Here is the modification performed on the HTML code:

The red strike-through shows the code I erased to align the photos.

If there is too much space between the photos, you have to edit in the html editor of Blogger, the CSS style of the <a> tags :

- change style property of  for <a> tag before the first photo  to:
style="clear: left; float: center; margin-bottom: 1em; margin-right: 1em;" 
-  change style property of  for <a> tag before the second photo  to:
style="float: center; margin-right: 1em; margin-right: 1em;" 
-  change style property of  for <a> tag before the third photo  to:
style="clear: right; float: center; margin-bottom: 1em; margin-right: 1em;" 
(in red : what you have to change or add, striken-through: what you have to remove)

Here is the final result:




Here is the code corrected:




Your turn. Good luck.

















5 comments:

  1. Very Nice and Informative Post.Keep sharing ideas. Your valuable ideas will help newbies to grew up into professionals.This ideas will make newbies to become more efficient in the field.
    Regards,
    Swapnil Kharche

    ReplyDelete
  2. Nice. I am always irritated by blogspots aligning, so this should help

    ReplyDelete
  3. Wow Amazing :)
    Thanks For Sharing
    http://mybloggerroad.blogspot.com/

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism