Markdown & HTML Codes Tutorial : How to Center Align Images, Links, GIF's and Text (Bold, Italic & Headers)steemCreated with Sketch.

in #steemit7 years ago (edited)

MARKDOWN & HTML.png

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

Let's say you want to align Content right to the middle of the Post, this gives it a clean and even appearance since all Content will self-align itself to the Center!

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

  1. <center>Your Text Goes Here</center>
  2. <center>[SteemitGuide](https://steemit.com/@steemitguide)</center>
  3. <center>https ://media.giphy.com/media/sMNNSOC0b6pDG/giphy.gif</center>
  1. Your Text Goes Here
  2. 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

  1. <center>Your Text Goes Here</center>
  2. <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

More Steemit Dedicated Posts

😊Follow Me for More 👌

Sort:  

Coin Marketplace

STEEM 0.26
TRX 0.11
JST 0.033
BTC 64678.67
ETH 3086.68
USDT 1.00
SBD 3.87