Choosing the right alignment for your elements that appear on the website is very important as this alignment defines the overall structure of a web page. When it comes to aligning text then developers often align text to the center to highlight the title or heading of a web page or a document. If you desire to learn how to center a text in HTML then you are the right place. Here we have summed up ways using which you can align your text to center.
How to center text in HTML
There are two ways with which you can center your text in HTML. Both of these ways have been discussed below.
How to center text using tag
If you wish to center your text then simply wrap your desired text within the tag and the text will be centered. However, the tag has been eliminated from HTML5 in favor of using CSS instead of this.
HTML
In the code above, we have created two paragraphs ,however, to depict the difference between default alignment and center alignment of the text we have wrapped up the text of the second paragraph within the tag.
Output
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-center-text-in-HTML-1.png" data-lazy- height="143" src="data:image/svg xml,” width=”984″>
The text has been centered using the tag.
How to center text using the style attribute
The preferred way of centering a text is by using the style attribute which gives an inline style to a particular element.
HTML
<html>
<head>
<title>How to center text in HTML</title>
</head>
<body>
<p>This paragraph is not centered.</p>
<p style=“text-align: center;”>This paragraph is centered.</p>
</body>
</html>
Through the usage of style attribute we are setting the text-align property of the second paragraph to center. It will generate the following output.
Output
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/How-to-center-text-in-HTML-2.png" data-lazy- height="143" src="data:image/svg xml,” width=”984″>
This is how you use the style attribute to center text in HTML.
However, if you do not want to use inline CSS to center your text then another way of doing so is by using the internal CSS. Here we have shown how it is done.
HTML
<html>
<head>
<title>How to center text in HTML</title>
<style>
#para{
text-align: center;
}
</style>
</head>
<body>
<p>This paragraph is not centered.</p>
<p id=“para”>This paragraph is centered.</p>
</body>
</html>
In the above code, since we only want to center the second paragraph therefore we are first of all assigning it an id and then using this id we are setting the text-align property to center in the tag in the section. This code will also give the same output.
Conclusion
In order to center text in HTML either use the tag or the style attribute. If you are using the tag then simply place your text inside this tag and it will be centered, meanwhile, set the text-align property of the style attribute to center to center a text using the style attribute. Note that the tag has been eliminated from HTML5 in favor of using CSS.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/B49B6FDCE1F74B3598C4C9BF564AEBEC-150×150.jpg625e240a684a5.jpg" height="112" src="data:image/svg xml,” width=”112″>
Naima Aftab
I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.
