Well here on Steemit alignment of pictures and texts are crucial for the post to be noticed, But everyone assumed it to be hard but in reality, it isn't that hard.

I've made this post because someone has asked me about markdowns and i know the struggles before i learned the markdown codes. So here I am making this post to help other steemians in making their way up to the top. Aesthetics of the post have a big impact to the readers.

We'll start with the easiest Image Alignment

Center Alignment :

Center Markdown code :

<center>Image.Link</center>

_{Sample Usage :}

_{(See the image is lined up in the center)}

Right Or Left Alignment :

Right or Left (depends on the direction inputted) Markdown Code W/O Source Link Code :

<div class="pull-Direction">< center >"ImageLink" < br/ >< em > SourceName< /em></center > < /div>

Flower

_{(See the image is now on the right side)}

Right Or Left (depends on the direction inputted) Align Markdown Code With Source Link :

<div class="pull-Direction"><center>"Image Link"<br/><em><a href="Image Source Link">Source Name</a></em></center></div>

_{Sample Usage :}

Flower

_{(See the word "flower" glows)}

_{(that is the indicator that it is linked)}

See how the two differs.

Not Linked :
<div class="pull-Direction">< center >"ImageLink" < br/ >< em > SourceName< /em></center > < /div>
Linked :
<div class="pull-Direction"><center>"Image Link"<br/><em><a href="Image Source Link">Source Name</a></em></center></div>

The Linked one had the code < a > and < /a > for the Link Source and Name.
It's just a single code but it makes the whole code differ from the others, so be mindful on it.

P.S < em > and < /em > is for making the text italic.