How to Align Images in Steemit Posts - Left, Right and Center

in steemit-help •  8 years ago 

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.

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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 you

The 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 ;)

  ·  8 years ago (edited)

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.

<div class=">

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.

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.

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

Thankyou so much for this. I was looking for the same.

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!

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. :>)...

Where were you 30 minutes ago when I needed you. Lol. Very helpful post.

LOL. Now you know forever. ;)

Some good ol' html. Good value article

This is a perfect cheatsheet. I'm positive new users and HTML unfamiliars will benefit greatly.

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!

This is what I was looking for earlier today. Thank you!

Just in time! You're welcome ;)

Thank you for your help and supporting others that need to align the pictures on their post
Best Regards Andrei

Thank you for sharing, gonna be very helpful!

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.

Can we use all HTML code like if the post was a website? :)

You can try it out and see what the preview shows.

Thank you! I was in great need of this information, its content was useful.

Wow, I didn't even know this was possible! Great information that I will definitely be using in the future :)

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.

thanks a million!

Searching this stuff last night thanks for post

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

  ·  8 years ago (edited)

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. :)

I have used these links a lot. Thanks mate :)

Hehe, you're welcome, it seems to help many ;)

I had almost given up on the left/right alignment. Thanks.
And learning how to put text under an image was a bonus.
shared.

Sweet, glad you finally found your solution before giving up! lol

Iv been looking for this exact kinda stuff, thanks. Putting a comment to make sure I can find this post again when I inevitably need it.

Cool, no problem, Have a good one.

Using these helpful tips on a new post! Thank you for the info!

You're welcome ;)

I've bookmarked this post and I use this about twice a day. I think I might start leaving a comment every time I'm here.

Thank you

LOL, you're welcome, glad to see it still helps people out :)

Thank you for this information. I want to write Persian from (right to left) but I don't know about < rtl > this code for writting. please help!

Thank you so much for helping me to finally get the text to wrap to the right of the first image in my new post. The code that you provided worked perfectly. OK, I had to try two or three times but that was my own fault or put it down to bad eyesight or old age... It worked like I wanted it to work, yay!

awesome thanks

Useful tutorial-- resteeming; I format my posts too, and get that question all the time.

Good post!!!

I was looking for this. Thank you so much!

I don't know why they don't have this info in the help sheet tho.

  ·  8 years ago (edited)

There's a lot not on the main site for new users to find ;) You're welcome.

Thank you. Very useful information.

Thank you, im currently working on this issue of putting pics in my posts.

@krnel very helpful post thank you

hola muchas gracias por tu post, ten buen dia

Just stopping by for quick pull-right .

Thanks again
@fortified

You are so helpful. Thank you!

Awe shucks thanks! :)

You are welcome. :)

Thanks @krnel :)

amazing post and the way you explain every thing is incredible , love this post dear , followed and upvoted

hope so u also follow back @shanzaylizay , it will b my pleasure

I will try it

Thank you so much for this

Thank you for telling me this, I've tried some of it, and will it all. That's great.

@krnel

Hopefully in the future, there will be many more ways that make the post look in steemit become more amazing, become the most powerful blog among others.

I know my few cents you dont need but what a wonderful post. You teach us a lot here and must have been very hard work thank you.

Wow that is really a great helpful lesson. I always wanted to align the images here but not successful. Now I have come to the right place. Thanx for sharing. I have bookmarked this post.

Thanks, it helped me! :)

Thank you very much and this may sound like a stupid question all this can be used in the markdown styling?

What program do you use

Wow, I wanted to do this, but I did not know how to do it until I got here in your post, thank you, it was very helpful. I just have a question, how to justify the text, ie (align the text to the left and right margins)? If you can help me.

  ·  8 years ago (edited)

You're welcome. You want columns of text?

No, I just want to (align the text to the left and right margins),

Example :

Did you mean it?
<center>this is a exemple</center>

this is a exemple

EXEMPLETWOthree
test 1
test 2test 3

like this?

| - | :- | -: |
| <center>test 1</center> |  test 2 | test 3 | ```

Thanx a lot for the info. It helped me a lot. One question! How to border the picture using tags?
And why colour text not supported here? or any way to use colour texts?

Thanks for the info, didn't realize we could use CSS and HTML in the editor. Makes me curious to explorer other formatting options.

Anybody here who can point me on to other useful posts like this one?

It really Helps 😊 useful information
thanks for this post 👍

Testing

thanks you very very much.i learnt a lot.keep it up.upvoted.follow back

Thanks you so much, worked like a charm, I have been struggling to get this one. Finally Managed to do it thanks to your detailed explanation 🌟 ✌
https://steemit.com/introduceyourself/@cyrexxlm/introduceyourself
https://steemfollower.com/?r=9710

Thank you so much for this elaboration!!

So helpful, thank you!

Hey, Back again. Thanks for this post.

Hope you are well. :)

thanks for the useful information!

Valuable post! thank you very much n.n

Me and @didumaraos are Noobs here on Steemit. We could use this to improve our blogs. Thank you so much! I upvoted you for a very good content.

I'm glad this post still helps people around Steemit :) Peace.

Of course, it is indeed an everyday help for me :) I always check this whenever I make my blogs. I even mentioned you on my recent blog as a sign of my appreciation to your work. My image wrap is quite nice to look at now :)

How do you go from center, aka < > center code, to right align? I put in the center code here in my posts on Steemit.com and then I tried to end it but it did not end. It did not close. I had many paragraphs centered from one center mark code. Trying to close it to right align other paragraphs.

Thanks for this! I'm just getting started on steemit so everything takes a while to learn. So happy to find a helpful community, though.
Your post had helped me put together a short list of podcasts I like, aligning the thumbnails left and right interchangeably to facilitate a dynamic read.
Check it out if you like! ;)
4 Women Led Podcasts Challenging Mainstream Media
Cheers! ♥ Gili

Great, thanks a lot! You helped me to align images on my post! :)

So useful! Thanks!

Thanks! Haven't tried images yet, so this made me feel more secure about layout.

Good for knowledge.​ Thank you.

This comment is one year late, hope you don't mind! I always refer to this post when I wanna centre images and I put it on my steemit wiki:
https://yoirtuts.com/index.php?title=Steemit very nice piece of writing and easy to follow.

Back again :)

Thanks for this article - it helped a lot.

still a great resource @krnel, i just leraned from here!
Wondering how you display those nifty code boxes?