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

in #steemit-help7 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:

Sort:  

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!