How to center text with HTML centering
The <center> tag for centering text in HTML was deprecated in HTML5. CSS is now used to center text. Utilizing the text-align property within the style tag makes code cleaner and helps prevent potential errors.
How to center text using the html center tag
Today, the CSS command text-align is used for HTML centering, i.e., centering text in an HTML document. This instruction is used to horizontally format text. For a long time, the now obsolete HTML <center> tag was used for this purpose. However, with the introduction of HTML5, the tag is no longer supported.
- Stay online with 99.99% uptime and robust security
- Add performance with a click as traffic grows
- Includes free domain, SSL, email, and 24/7 support
How to achieve HTML centering with text-align in CSS
Since HTML5, you store the instruction to center text in HTML in the style tag. The easiest way to illustrate this process is with an easy example. In the following code, we’ll center the headline, the text and an HTML div container in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s where your content goes.</p>
<div>Here you’ll find a div.</div>
</body>
</html>The structure of the document is determined in advance, ensuring that the code remains organized and helping to prevent errors.
- Free Wildcard SSL for safer data transfers
- Free private registration for more privacy
- Free Domain Connect for easy DNS setup
How did the obsolete HTML <center> tag work?
In older versions of the language, the HTML tag <center> was used to center HTML text. However, since it’s obsolete and no longer supported, it’s best to use the CSS solution instead. For the sake of comparison though, we’ll go over its syntax and show you an example of how the HTML <center> tag was used. First, let’s take a look at the syntax:
<center><p>Text</p></center>Unlike modern solutions, the code had to be changed directly in the HTML body to center text. Depending on the scope and structure, this often resulted in messy code that was more susceptible to errors:
<!DOCTYPE html>
<html>
<body>
<p>Here is a text that has not been centered.</p>
<center><p>Here is a text that has been centered.</p></center>
</body>
</html>The result looks something like this:
You can find everything you need to know about Hypertext Markup Language in our Digital Guide. Here, we explain how to take your first steps with HTML and how to integrate CSS into HTML, using lots of practical examples.