How To Align Pictures In A Post

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:

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj92c1INHRMvlSOeyPV9z4qD4I8WEqVR0mfM9Me2oLoursZL6TTUU0JGW2qHHI9okHVR_-XOITEvrKMHgId8jyMPhJxqAtrM0eEBpEdOLH7DYZ60X4vbepMODgYwYc2LprJPrBfesu-uM/s1600/how-to-align-photos-part1.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj92c1INHRMvlSOeyPV9z4qD4I8WEqVR0mfM9Me2oLoursZL6TTUU0JGW2qHHI9okHVR_-XOITEvrKMHgId8jyMPhJxqAtrM0eEBpEdOLH7DYZ60X4vbepMODgYwYc2LprJPrBfesu-uM/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.

Share on Google Plus

About Mr.Ikram

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.