How to Center Your Text, Links and Images on Steemit
Centering is the name of the game this time, and it's really easy! Well, except for the glitches. 😞 We'll do this using the <center></center>HTML tag set.
If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you!
Centering Text
- The first thing you need to know is that some markdown tags (like the octothorp "#") won't work inside of HTML tags so, if you're going to center something, either only use HTML or put it nested within the MDL. 😠
For example:
# <center>This will work 😍</center> #
This will work 😍
<center># but the MDL inside of the HTML won't work #</center>
<center>*However, MDL formatting code, like *s, will work!*</center>😳😵
Centering within a line has an interesting effect on the text. If you use center tags within the text of a line (before the line break), anything before the tags will be on that line,
the centered text will be on the next line (just like I did here), and any text after the center tags will be on the third line.Oh, you'll sometimes need a blank line above the centered text if you're combining MDL with HTML, otherwise it may malfunction.
<hr>
*<center>Oops! The asterisks didn't work!</center>*
*
<hr>
*<center>Aah, that's better! 😎</center>*
- You can center multiple lines or paragraphs, but it's hard to get it to stop after the closing center tag. In order to fix that, you'll need to enclose the lines or paragraphs with a pair of paragraph (p) tags:
<center><p>"Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles."
C/O https://placeholder.com/text/li-europan-lingues/</p></center>
This part is outside of the tags, so it's not centered.
produces:
"Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores. At solmen va esser necessi far uniform grammatica, pronunciation e plu commun paroles."
This part is outside of the tags, so it's not centered.
- It is important to put the paragraph tags inside the center tags or it may malfunction!
<center><p>Like this works</p></center>
<p><center>but not this, which may cause text after the closing tags to still be centered.</center></p>
Centering Links
The same rules apply to centering links.
The format for links can be just a link: www.pixabay.com, or you can use the full format: [optional, but important, description/title](link)
<center>[Pixabay, home of free images](www.pixabay.com)</center>
{The description is important for software for the blind, for example.}
Centering Images
Basically, the rules above are the same for images, too.
You can use just the bare link:
<center>https://cdn.pixabay.com/photo/2018/07/08/14/16/cat-3523992_960_720.jpg</center>
Or the full link, which has the format ""
<center></center>
NOTE: Please note that the link is strange (
https://steemitimages.com/400x0/) because I used the reduction function of Steemit (due to the image being too large to center). I wrote an article about how to do this 2 days ago: How to Use Headers on Steemit.
Ubergeek note: If you're wondering why I do not mention the use of divisions (div) tags in this article, it's because center doesn't work correctly with them due to the added line break before and/or after the center tag. 😧
Credits:
If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!
A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.
I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.
The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.
If you appreciate this article, please upvote/like
, resteem/share
and share it to Facebook
, Twitter
, Reddit
, LinkedIn
and wherever else
you can!