Test align left for caption for photos uploaded via Blogger photo upload icon

A blogger at Add caption to images uploaded via the Blogger photo upload icon how to align caption to the left. I have no idea but the only way to know is to test and that is what this blog is for. The result of the first test had been captured in the screenshot below:



The script used to display the above is shown inside the scroll box below:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" />Farmers' Market (Pasar Tani)</a>
<br /><br />
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" /><span style="text-align:left;">Farmers' Market (Pasar Tani)</span></a>
<br /><br />
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" /><div style="text-align:left;">Farmers' Market (Pasar Tani)</div></a>

The script above display a screenshot with a border which extend into the left sidebar in some web browsers like the Flock social web browser. The border was removed using method described in Get rid of border in images uploaded via the Blogger photo upload icon (click BACK button to get back to this page)


Even using the HTML tag <br />, could not force the subsequent photo to be displayed to the left except for the third one, and I suspect if I had used a small photo for the test, even that one will not be aligned to the left although all of them have the script to make the image display to the left. Now the other thing to do is to delete the first two script, leaving the third one standing alone below:

Farmers' Market (Pasar Tani)

Still no luck. That means the method used above cannot be used to align the caption to the left and that means we will have to test other alternatives:

Farmers' Market (Pasar Tani)

This was tough. The above was added first using the tag <div style="text-align:left;">, which in most cases put whatever comes after in a separate line, but that didn't work. So I had to add a <br /> tag to force a line break to make the photo above display in a separate line. Now I also used a HTML table tag <table> to make the caption. Most likely, the first way I used the <table> would end up looking the same as the following more simple method, so I added a border to table by adding a border attribute to the HTML table tag <table border="1">

The script to display the above photo with a caption is shown in the scroll box below:

<br />
<div style="text-align:left;"><table border="1"><tr><td><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s1600-h/Kelana+Jaya+pasar+tani+stalls.JPG"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpxn_-3TP04MMUkc2FdAm_YOCrF1_JwQIcqKy4NIn8FRCy5Jb9DQtcu_5SDjsKJitIV-5H7is9HwJ7UWBNlzLHjRWN5z7J-vtD5LWG-qWtfTsJmA9euJjWpduWGkTwEZpSJ7I8px8gk_C/s200/Kelana+Jaya+pasar+tani+stalls.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5166982542904398018" /></a></td></tr><tr><td>Farmers' Market (Pasar Tani)</td></tr></table></div>

Now I am going to try a simpler way without using the table tag <table>



Farmers' Market (Pasar Tani)

Conclusion: I give up. You will have to use the table tag <table>. The above attempted simpler method failed, even after adding a <br /> tag to for a line break, and when that failed, pressing a "ENTER" or "RETURN" key (which has about the same effect as adding a <br /> tag. If you want to use the above simpler method, you will have to keep pressing the "ENTER", previewing, pressing "ENTER" again, etc., until you get the caption below the photo.