[How-to] Center images and videos on steemit posts, make your posts look better

in #steem8 years ago (edited)

I've seen many posts with images but there is something that just doesn't feel right, many of the images are moved to the left side of the page, there is a way you can center your images and I will tell you how. 

Steemit editor has two modes for editing, a more visual editor with a buttons pane on the top that lets you do some things with your post, and the Raw HTML editor that you find when you click on the top right link of the buttons pane. unfortunately the visual editor has no option to center the images so we will do it using the Raw HTML editor instead. once you are on the Raw HTML editor you can return to the regular editor by clicking the top right link again. (labeled Editor)

After you click on the Raw HTML link you will find the code that makes up your post, there you will find images inside a img tag structure like this, with the link to the picture inside the src="" part.

We will focus on the img tag which is this piece 

you only need to "wrap" the img tag inside another tag, the center tag so it looks like this.

notice there are two center tags enclosing the img tag, one opens the tag on the left, and the other closes it on the right, so the image gets inside the center tags and so it gets centered by the browser. don't forget to put the '/' slash on the closing tag or it won't work, this is how the browser knows its the closing tag that contains the image to be centered.

Once you are done save your post, for some reason if you return to the regular editor and make changes the center tags on the html get erased so save the post, for this reason you may want to do this once you have finished writing your post.


It also works with gifs:


and also works with video urls like this:

Sort:  

@tokyo3, I was looking for this, but I only found something like this https://github.com/gnab/remark/wiki/Formatting and I don't get what I want from it. The formart for images was like
.right[Right-aligned image]

Look, I pasted word to word that could be found on the link with instructions, but it doesn't work, as you can see with (.right) at beggining of image.
Anyway, thanks for the guide. You helped me a lot.

yeah, but none of the text describing what you actually type is posted.

You have to escape that stuff or surround it in quotes to show.

yes , thanks for the heads up, It looks like the pre and code tags are not escaping correctly the html on steemit, I tried with quotes but it also doesn't work, Im trying to find how to print html on the post maybe I will need to paste images instead

You bet. I was thinking of a similar post and had the idea to just use images of the text. Perhaps that will work nicely? :D

Thank you for sharing this information. I been having trouble posting pics already. this may help me.

Thank you for taking the time to post this... much appreciated!

I've been looking for this. Excellent. Now my images look "normal".

Very helpful and easy to learn. Thank you for the explanation on the subject.

Congratulations @tokyo3! You have received a personal award!

Happy Birthday - 1 Year on Steemit
Click on the badge to view your own Board of Honor on SteemitBoard.

For more information about this award, click here

By upvoting this notification, you can help all Steemit users. Learn how here!

Brilliant, I will definitely make use of this in my next posts, my images always look awkward on the left!

I'm glad I'm not the only one who is actively trying to improve the content on Steemit. To that effect I created this campaign (please give me feedback, I just want to help):

I will upvote every constructive comment I get on Steemit with 5-10 cents in order to create a WIN-WIN-WIN.

You win by having me upvote and follow you, I win by having great comments and more followers and above all Steemit wins by getting better content.

Read about the rules and conditions here.

Please respond here or on my post with any feedback you have, thanks!

Hey have they since stopped the ability to enter another editor, because I only seem to be presented with the one; with no html option..

Have the same problem, no html option for me either...

Great post ●‿●