New to Steemit? If so do you feel like this Pug and don't know where to get started in Life ? Check out some of my Tutorials I have made here on Steemit that will help you get up to speed, especially when it comes to using Steemit's Built-in Raw Markdown Editor that allows you to make use of Markdown & subset of HTML Codes to further edit your Post & Comments
In this Post, let's learn how to use the Raw Markdown Editor to Align Content to the Center, this includes how to align Fonts that are Bold, Italic or a even Header
If you aren't aware it, all content tend to align to the left on default however this can be changed with just a couple of Markdown Codes and can be applied to both Font, Photos & GIF's
Center Align
Just use the Following HTML Codes
<center></center>
<center>Your Text Goes Here</center>
Step 1 is to include <center> followed by your Wording, Photos, Link or GIF's
Step 2 is to include a Final HTML Code by including </center> at the end
Keep in mind that if you do not do Step 2 properly, all the remaining Content of your Post will be automatically aligned to the Middle. When using Markdown & HTML Codes, remember to be careful because it won't work unless you have done it correctly!
In the Beginning you'll likely to run into a couple of errors, just remember to get the code right and to check the Preview to detect any errors
Example of Center Alignment
- <center>Your Text Goes Here</center>
- <center>[SteemitGuide](https://steemit.com/@steemitguide)</center>
- <center>https ://media.giphy.com/media/sMNNSOC0b6pDG/giphy.gif</center>
Your Text Goes Here SteemitGuide
Now we know how to Center Align Images, GIF's and Text however you want to spice things up a little! Let's say you want to not only center align certain Text but you would also want that Font to be Italic or Bold
- <center>Your Text Goes Here</center>
- <center>Your Text Goes Here</center>
You use both HTML and Markdown Codes to make Font Italic or Bold!
<center>*Your Text Goes Here* </center>
<center>**Your Text Goes Here **</center>
<center><b>Your Text Goes Here</b></center>
Remember that if you're planning on using an HTML Code, you have to include / to sorta finish of the Code. Not doing so could result changing all your remaining Font or Post Alignment. Practice by typing it out and reviewing it in the Preview Section Below
What about A Header?
If you tried to use # as Markdown Code instead of HTML, you won't be able to Middle Align your Header so you got to use a subset of HTML Codes to get the job done!
<center><h1> What about A Header?</h1></center>
Adjusting Header Font Size
You could technically adjust the Font Size of your Header by just making some simple adjustment! HTML Code of Header would be <h1> followed by </h1> , H1 is the biggest Font Header the Raw Editor recognizes however by just adjusting & replacing the number followed after H, you can set which Header Font Size you'll use. There up to 6 Different Font Sizes, all of them beginning with ''H'' and are categorized according to number, with 1 being the biggest Font and 6 the smallest font Size for a Header
Header Size H2
Header Size H3
Header Size H4
Header Size H5
Header Size H5
<center><h2>Header Size H2</h2></center>
<center><h3>Header Size H3</h3></center>
<center><h4>Header Size H4</h4></center>
<center><h5>Header Size H5</h5></center>
<center><h6>Header Size H5</h6></center>
More Post on Markdown Guides
Beginner Guide for Markdown & HTML Codes
Make use of Columns, Tables, Smiley's and align Text
Markdown & HTML Code Guide for Beginners that includes 5 Useful Tips to edit Posts & Comments using Steemit's Raw Editor; Edit & Align Text, Columns, Table and Smiley'sLearn to make Text a Header, Bold & Italic
Level 1 of my new ''Markdown Beginner'' Course
''Editing Basic Fonts'' Steemit Markdown Beginner Level 1: Learn How To Style your Font with Headers, Bold & Italic TextAdd GIF to your Steemit Post
Learn to use Giphy to include GIF in your next Steemit Post
How to Add GIF using Steemit's Raw Markdown Editor and more Guides & Tutorials to help you edit your Post like a Pro!Ultimate Guide & Cheat-sheet for Smileys & Icons 😊
A dedicated Steemit Post showcasing a variety of Smileys & Icons
Ultimate Guide & Cheat-sheet for Smiley & Icon's, make use of the Thousands Emoticons recognized by Steemit's Raw HTML Editon
More Steemit Dedicated Posts
Full Guide on Steemit Permission Keys
Know your 5 Permission Keys Inside Out and the comparison between them
Everything you need to know about Steemit's Permission Keys; Posting,Owner,Active,Memo! Digital Passwords with Unique Functionality, that allows you to Securely connect your Steemit Account with Third-party ServicesHow to Search Steemit Hashtags
Making use of Hashtags to put your Post out there & how to maximise your reach with specific
How to Search Hashtags/Topics that are Unpopular on Steemit & Learn 3 Common Types of Hashtags to use on Social Media to draw Attention, Organize and Promote Content
For headers and font sizes it is easier to use "#"
one # is the biggest font and six #-s is the smallest.
Appreciate this article. Still having trouble figuring out what I am doing wrong when centering text...because the rest of the document is also centered. Anyone have any ideas?
You center the text you want and then end it with (/center). but of course, instead of using ( ) use < >. then use br to break paragraphs.
Nice of you to take more time to explain, appreciated.
Glad to help. I hope it wasn't too confusing.
been looking for this. sending this to myself, so I can use it later.
You are my hero for the day, thank you!!!!! 😊😊😊
Thanks! Writers like us needs a guide like this especially after the recent discontinuation of the raw Html feature. Saved and upvotes!
This came in the right time when i really need this! i bookmarked your article just in case i need the codes, thanks a lot your a life saver.
P.S. Is it me or did the Developer just made changes to Steemit's Design Interface! There is more spacing in-between Post and pop-up Menu, a more fit Center Alignment of the Post Layout!! looks a lot neater and definitely better of as a Blog Post!
What I want to learn how to do is align pictures to the sides
https://steemit.com/steemit/@steemitguide/steemitguide-howto-make-use-of-a-steemit-feature-that-allows-you-to-display-content-floating-left-right-and-learn-to-paragraph - Here you Go, Try it out!
<p>
<div class=pull-right>
< Image Markdown Link Here>
</div>
Insert Text here if you want to input next to your Image!
</p>
@tommycordero
I just tried it and it worked, thanks a lot.
But now when I use those codes to align the pictures I can't make the text darker
or bigger
or even divide the page
Great article. Is CENTER really the only way to center align content on Steemit? I was just wondering considering that the CENTER tag is an outdated element in HTML.
Thanks i am goin to follow you for sure :)
Thank you so much, I already fixed my first post :)
study it
Thank you! Thank you! Thank you!
You've got my follow! :)
Thanks to the article is very thorough! I wanted to add a trick to further improve the writing here on Steem; I created a post where I reveal them here
I am going to read it!
@iamoratorsam thanks hope it was helpfull!
thanks for make my day easy.. very helpful post for me to posting and stylish post on my blog.. love you keep sharing
Thank you for the refresher! It's been a while and I'm no coder. :)
Thanks! This was so helpful man. i am in the process of writing my first post here on Steemit, and I wanted everything to turn out well. so i had to learn this extra tips. Thanks again man!
Thank you for this post. Very helpful. I just want to know how do you do RIGHT ALIGNMENT OF TEXTS? Thanks.
Since I am new to steemit, this blog is really worth to folow. resteem and upvote is a must.
Very helpful article. I wish I would have come across your info first because it would have saved a lot of time trying to figure out why instructions from related articles wouldn't work. Thank you!!
Thank you for very good information.