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="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="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="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:
<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:
This is good and useful information. Till now I only used the p and center tags but with your instructions I have now more possibilties to markup my posts. Thanks again. I upvoted, resteemed and supported you for Steem Witness .
Thanks a lot for the support. Can you tell me why you use p tags? All you need to do is hit enter and it will be a paragraph. Maybe there is some specific reason you use it. Thanks.
No specific reason. Must be from the time that I made my first website. Like starting a new paragraph. But that is a long time ago. Today I only use wordpress.
Hi, thanks for your interesting post. Welcome to my blog @evgenya86
Ah this is new for me. Just recently started learning the quote command. Seems that there is a lot more to the markdown format that I have yet to master. Thanks for the post! Have fun out there and good luck with future posts!
Well this is in html, not markdown. If you want to do quote in markdown, you can use
>, the greater-than symbol. You're welcome, have a good one too!This isn't markdown. This is a class added to the steemit css.
And < center > is basic HTML.
Thank you very much for educating us over picture alignment. This is a problem which lot of steemians must have faced but none of us came through with a solution. If someone had it then they did not thought of sharing.
Well done brother.
I steem under the profile @honeychum. I would like to be in ur contact for future educative posts like this. You can follow me and steem share comment upvote my work if you like it. Thanks again and big cheers...
Thank you, a pity I can't bookmark posts like this straight away.
Thank you for the informative article. I copied off the directions for creating images and placing them in various places in the text.
Question for you please. Since I use most of my images from pixabay, could you tell me how to resize the image from pixabay or inside steemit? I want to avoid importing my image to a program, resizing and exporting. Can you help me please? Thank you.
code>quote # headerThank youThe align-right -left will resize the images to take up half the column. I manually resize them so they are smaller and load faster, but the code resizes that larger images anyways (except they are larger file size and take longer to load).
Awesome. thank you!
WOW ! Thanks for The Good Info. I have also Related Post Here.
https://steemit.com/steemit/@cworldv99/steemit-tips-and-tricks-for-the-beginners-check-it-out
You can follow me @cWorldV99
Ok this is just super helpful! I know I need to do this. I was wondering about how to align and here ya go! Thanks for this one! Gonna resteem this one!
Hehe, nice! It's a handy thing that can make the post look different. Yo're welcome and thanks!
Ah this is new for me. Just recently started learning the quote command. Seems that there is a lot more to the markdown format that I have yet to master. Thanks for the post! Have fun out there and good luck with future posts!
Nice. You can also use
>to make a quote, without the html. I use that, it's quicker hehe. Thanks for the feedback.Very helpful thank you!
This is so helpful, thanks!
Thank you for share; reestimed.
very helpful, upvoted and resteemed !
Thanks for the support and you're welcome ;)
Thanks for this advice! I'm learning HTML coding for my posts, there is so much to learn! Do you know or it is possible to use coloured text in your Steemit posts? Because it seems this is not working (or I use the wrong codes) thanks in advance!
You're welcome, but no the color doesn't seem changeable in markdown using html.
thank you
You're welcome.
Thank you for this
Thanks for the post. I'll add some information to this in general. Essentially when you write a post it allows you to interact using HTML. Anything you want to do on your post that you've perhaps seen before just google HTML font colour change, HTML bold, HTML center and so on.
To make text bold <b'> text here </b'>
To center <center'> text here </center'>
Just remove the '
You get the picture, learn some basic HTML commands and you'll be well on your way :)
Hope this helped a bit, nice article also.
If you enjoyed this piece, please Upvote, Resteem and follow me @hotandrandom
Thank you, @krnel! This article is very useful to me. I'm a new joiner on Steemit and I'm trying to learn how to write my articles well groomed!
You're welcome, this should help you out then. It adds some style ;)
This is a great help for newcomers such as myself as well as people that have been around longer but didn't know how to do this.
Thanks for this guide! This helps alot :)
followed and upvoted! yeyy
I finally know how to ALIGN!
YEEEEES
Thank you!
Success! LOL! You're welcome.
I want a markdown version though I don't think that's possible?
I might also update my tool with these options so people can just insert the image and they automatically get Image Source plus left/right/center allingment deending on what they want.
Not sure, not the standard markdown, maybe custom
Short and on point! I'll save this post until I can do that without having to look again how it's done. Thank you for this post!
Hehe, you're welcome!
Thanks for great info
It helps me
Thanks buddyy
You're welcome.
Very useful - thanks for the tips @krnel. I never even thought about placing HTML commands in my posts to help with image alignment but I'll definitely look into using them on future posts.
Great, glad I could help;)
Sure thing @krnel - looking forward to your next post!
Thankyou so much for this. I was looking for the same.
Where were you 30 minutes ago when I needed you. Lol. Very helpful post.
LOL. Now you know forever. ;)
Very good info...I need it :)
Is there a catalog some where for bold, italic, font size, font, style, etc. thanks ... much thanks... Now we can pretty up our posts. :>)...
Some good ol' html. Good value article
This is a perfect cheatsheet. I'm positive new users and HTML unfamiliars will benefit greatly.
Thank you for sharing, gonna be very helpful!
Thank you for your help and supporting others that need to align the pictures on their post
Best Regards Andrei
This is what I was looking for earlier today. Thank you!
Just in time! You're welcome ;)
Very useful post @krnel! I've been wanting to find out how to put my images either left or right and this is a great help!
Thank you!
Hope your day is going well buddy!
Sweet, glad I could help!
Wow, I didn't even know this was possible! Great information that I will definitely be using in the future :)
Thank you! I was in great need of this information, its content was useful.
Can we use all HTML code like if the post was a website? :)
You can try it out and see what the preview shows.
I was wondering how you did that... Thanks!!
I'm sure people who don't know how to will also find this useful. Great contribution! New users will particularly appreciate this. We are having thousands join us everyday so your work will help them learn the ropes :)
Hehe, welcome ;) It would be good if the site has links to a tutorial section.
Searching this stuff last night thanks for post
Hi! Thanks for the tips! Do you know how to center text? Or make it bold? I'm new here :)
Use the same center tag method, but instead of an image just put text.
<center>TEXT</center>Very helpful, thank you.
Thank you for this!
I hope to be able to put some of this info to use in the near future.
You're welcome. Yeah just try it out it's easy ;)
thanks a million!
Thank you @krnel. I managed to clean my article here Durban Bunny Chow using your tips. On my way now to go vote "krnel" at Steem Witness. Also resteemed
Hi. Me again. Just aligning some text/images.
Thanks
@fortified
Haha! Nice. I searched on google for "steemit align images" and my link is second. Nice. Glad it's helping people out on their posting format :)
Nice one. I've booked marked this page so I'm to lazy to remember it all now.
See ya on the next post.
FINALLY !! I find someone explaining about such important matter. Thanks krnel
Yo're welcome, glad it could help you.
Thank you for your good post. I understand little English and only understand what Google translates for me, but I liked this post.
Great, glad it helped you out.
Thank you.
Was just trying to figure this out a few hours ago. Thank you. Here's your upvote. :)