This guide will implement some of the ways to align the text to the center using inline HTML.
Center Text in Markdown by Utilizing HTML:
To center text in markdown, we have to exercise HTML in our markdown file. This demonstration will help you learn to employ HTML tags for the alignment of text according to your document. Let’s begin with the illustrations.
We are using the Visual Studio Code tool to implement the code. The tool is launched then and creates a new file with “Markdown” as the file type. Now we will compile the scripts onto it.
Markdown provides us with different syntax for styling any text in a document, but it doesn’t give any native syntax for positioning text in markdown documents. Luckily, it allows us to exercise plain HTML within it. So, we will explore how we can align text in markdown utilizing HTML with practical examples.
For the first instance, we have created a markdown header. The header can be added to a markdown document by using the hash (#) symbols. A single hash (#) represents a level one header. So, we added a hash (#) followed by a space. We have titled the header “This is a Markdown Header”. Keep in mind that you must add a space after the hash symbol to make it a heading, else it will be considered as some normal text with hash symbols appended to it.
This is the predicted outcome of the above-generated markdown script. Here you can see that the header is aligned on the left side of the document, which is the default alignment for the markdown script. And it cannot be changed by using pure markdown.
Now, if we want the header to be displayed in the middle of the document, we have no other choice in markdown but to employ the HTML tags into it, which will allow us to change the placement of the text wherever we want it in the document.
For creating a heading, HTML has a tag “<h>”. This tag has two parts: an opening “<h>” and a closing “</h>”. We want to create a level 1 header, so we will use the tag as “<h1>”. To align the text in this tag, we have used the attribute “align”. This property defines the positioning of any text, image, link, button, etc. on the webpage. Here we are using it to position our markdown text header. We have assigned it the value “center” as we need to place the header in the middle of the page. After that, we specified the text for a header as “This is a Markdown Header”. Then the header tag is closed using “</h1>”.
Now in the preview window, you will observe that the heading has currently moved to the center of the document.
For a clear distinction, we are providing both the rendered output headers, with markdown and with HTML, in the snapshot below:
We have learned to center the header on the webpage. Similarly, you can align the rest of the headings: right, left, center, justify, etcetera, in the document. Now we will see how to center paragraphs in markdown. We will first create regular text in markdown to see its alignment, and then, using HTML, it will be aligned to the middle.
To create a text paragraph in markdown, we don’t need any syntax. Simply write the text strings and it will be displayed as a regular paragraph. So, we have created a paragraph as “We are learning to align the normal text in the middle of the webpage. Markdown will display it in the left position of the page with its default settings.”
The rendered output displays a markdown paragraph aligned on the left side.
There is no way to make it move in the middle with a markdown. Again, HTML will let us do this using its tags. We will create a paragraph in HTML using the specified HTML tags for paragraph creation, which are “<p>…</p>”. The first “<p>” tag is the opening tag, and the “</p>” tag is the paragraph closing tag. Between these two tags, the text for the paragraph will be specified. So, we wrote the paragraph between the paragraph tags as “We are learning to align the normal text in the middle of the webpage. To align the text in the center, we are using the HTML.”
This text will be exhibited on the left side by default. To change its alignment, we have to use the “align” property within the opening “<p>” tag. So, we inserted the “<p>” tag in it and provided the value “center” so that the paragraph would be put in the middle.In addition, we changed the text font size from normal to size “3” by using the HTML “<font>” tag and specifying the size with the “size” attribute.
Now the newly created paragraph is displayed in the middle and the font size of this paragraph is bigger than the regular text size.
Let’s see both the output paragraphs together for better visual differences in the snapshot provided below:
You can observe the alignment change as well as the font size variations in both paragraphs.
We can also align a portion of a paragraph to the center rather than the entire paragraph. For this, we will use the HTML class “<div>’.
First, create a markdown paragraph and then place the text lines between the div tags “<div>…</div>” that we want to be displayed in the middle. Within the opening div tag, we have used the attribute “style” and assigned it the value “text-align: center”.
The rendered output shows a paragraph partially center aligned.
Another HTML tag that can be used for aligning the text to the center is “<center>”. This tag is the simplest and easiest one. You just have to put in between the tags the heading or text line or paragraph to center it.
For placing the heading in the center, we first placed the opening and closing “<center>… </center>” tags, and in between these tags we used the HTML “<h2>.. </h2>” tags to specify a heading. The content we have provided for the heading is “This is our level-2 heading.”
The currently created second-level heading is successfully aligned in the middle of the document.
Similarly, we can use this tag center the paragraphs in the markdown. We have initialized the “<center> … </center>” tags and used the “<p> …. </p>” tags between them to create a paragraph. The text provided between the paragraph tags is “We are centering the paragraph now.”
This yields us the following output:
Conclusion:
In this article, we have provided you with different techniques for exercising the HTML tags to align the text in the center. Each technique’s output is compared with the native markdown syntax to make the differences comprehensible. We have implemented the scripts in Visual Studio Code on the Windows Operating System.
