You’re learning HTML and CSS, and you want to know how to center the text in a DOM element (whether that DOM element is a heading, a paragraph, or something else).
It’s a good thing you stopped by. Because, in the following few paragraphs, we’re about to talk about the wrong way and the right way to center text in HTML, along with everything else you need to know on the topic.
You see, there’s an old-school way to do this—which, despite the claims of some websites with old instructions that haven’t been updated in a while, you really shouldn’t use—and a new method. And we’re about to look into both.
The old-school way to center text in an HTML document is to enclose it in the <center> tag, but this tag is no longer supported in HTML5. For this reason, the best way to do this is to give it the text-align: center CSS property.
With the Text-Align CSS Property
The best way to center the text in an HTML element is to give it a text-align CSS property with a value of “center.”
You can do this by inlining the CSS code in the style="" attribute of the HTML element whose text you want to center:
<p style="text-align:center">Text goes here.</p>Or by targeting the HTML element in question with a CSS rule in a style sheet, regardless of whether it appears in the document within a <style> tag or is in a standalone file linked to in a <link rel="stylesheet"> tag:
p {
text-align: center;
}If you already did this but the text isn’t centered, check in your browser’s developer tools if the text-align: center CSS property is being crossed out.
If it is, then it’s being overridden by another CSS rule that sets a different value for the same property. We’ve written about how to fix this in an article titled, How to Prevent CSS Override.
Learn about more ways to select HTML elements with CSS rules:
With the <center> Tag
In HTML4, you could center text by enclosing it in the <center> tag:
<p><center>Text goes here.</center></p>However, this tag was dropped from the HTML5 standard, and browsers are no longer required to support it. As we’re about to discuss in a moment, it isn’t a good idea to use it—and doing so may create problems for you and your team mates in the future.
The <center> tag does exactly the same thing as the text-align: center CSS property. It’s just that the tag is the old HTML4 way of doing things, and the CSS property is the new HTML5 method (and the one that you should be using).
Can You Still Use the <center> Tag in Your HTML?
The use of the <center> tag to center text in HTML is no longer recommended because the tag has been removed from the HTML5 standard. Although most web browsers still support it, this may not be the case in the future.
This means that you can continue to use the <center> tag in your HTML markup, at least for the time being. But if and when a major browser drops support for it, you will find out the hard way—with your site’s design suddenly breaking—and you will have to refactor your site’s HTML code.
Oh, and I almost forgot. There’s another reason why you probably want to stop using the tag in your HTML markup: it adds bloat to your code.
Whereas with CSS, you only have to declare the text-align property once and then apply it to the elements you want with a CSS selector, in HTML you have to open and close the tag EVERY SINGLE TIME you want to center the text in an element.
This adds more characters to the HTML documents that the user’s browser must parse, and more characters means a slower website. Sure, the difference alone isn’t that big. But remember that, on large projects, these things tend to accumulate.
In Conclusion
To center text in an HTML document, give it the text-align: center CSS property. Avoid using the <center> HTML tag because it’s no longer in the HTML5 specification.
