### 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*

---

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

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="http://i.imgur.com/ow7sHn0.jpg" /></div>

Text after the div tag...
```

---
### *Left align*

---

<div class="pull-left"><img src="http://i.imgur.com/ow7sHn0.jpg" /></div>

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="http://i.imgur.com/ow7sHn0.jpg" /></div>

Text after the div tag...
```

---
### *Center align*

---

<center><img src="http://i.imgur.com/ow7sHn0.jpg" /></center>

Again, put the `<center>` tags above or below text. For this example, the code is:

```
<center><img src="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:

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

`<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:

<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>

`<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.

---
<sub>If you appreciate and value the content, please consider:
Upvoting <img src="http://i.imgur.com/H9LQn1S.png" /> ,&nbsp;&nbsp;&nbsp;&nbsp;Sharing <img src="http://i.imgur.com/ri11ehe.png"  /> **or** &nbsp;&nbsp;Reblogging <img src="http://i.imgur.com/1Abt9EI.png" /> **below**.</sub>

<sub>[![Follow](http://i.imgur.com/aTa4vR8.png)](https://steemit.com/@krnel) me for more content to come!</sub>

---
<sub>**Please consider supporting me as a [Steem Witness](https://steemit.com/witness-category/@krnel/krnel-s-declaration-of-witness) by voting for me at the [bottom of the Witness page](https://steemit.com/~witnesses); or just click on the upvote button if I am in the top 50:**
<center><img src="http://i.imgur.com/8pdfp0Q.png" /></center></sub>