I have recently had some comments asking about how the image alignment can be done in a Steemit post, like I sometimes do it. So here is a tutorial on how to do that ;)

---

Quick Reference

---

Put the img tag for your image where it says IMG HERE, and put your text under.

Float Image Right of Text

<div class="pull-right">IMG HERE</div>

Float Image Left of Text

<div class="pull-left">IMG HERE</div>

Center Image

<center>IMG HERE</center>

---

Example Usage

---

Right align

---

Put the <div> code for alignment above the text you want it to start to wrap around. For this example the code is:

<div class="pull-right"><img src="<img class="markdown-img-link" src="https://steemitimages.com/0x0/http://i.imgur.com/ow7sHn0.jpg""/> />div>

Text after the div tag...


Left align


Again, put the <div> code for alignment above the text you want it to start to wrap around. For this example, the code is:
<div class="pull-left"><img src="<img class="markdown-img-link" src="https://steemitimages.com/0x0/http://i.imgur.com/ow7sHn0.jpg""/> />div>

Text after the div tag...


Center align


Again, put the <center> tags above or below text. For this example, the code is:
<center><img src="<img class="markdown-img-link" src="https://steemitimages.com/0x0/http://i.imgur.com/ow7sHn0.jpg""/> />center>

Text anywhere, it doesn't matter...


Adding text under an image

If you want some text for a description or adding a link to the source like I do:

Credit: Steemit
<div class="pull-right"><center><img src="http://i.imgur.com/ow7sHn0.jpg" /><br/><em>Credit: Steemit</em></center></div>

And if you want the text to link to a site, add the <a></a> tags like below and replace the website with the one you want:

Source: steemit
<div class="pull-right"><center><img src="http://i.imgur.com/ow7sHn0.jpg" /><br/><em><a href="https://steemit.com">Source: steemit</a></em></center></div>

The <br/> tag is for newlines (like pressing "Enter").
The <em></em> is for italics.
You can change things around and learn some extra stuff about html formatting tags, like bold which is <strong></strong>.
Well that's it! Enjoy aligning images!

Thank you for your time and attention! Take care. Peace.

If you appreciate and value the content, please consider:

Upvoting  ,    Sharing  or   Reblogging  below.
 me for more content to come!

Please consider supporting me as a Steem Witness by voting for me at the bottom of the Witness page; or just click on the upvote button if I am in the top 50: