How to center text in HTML

Updated: 12/30/2021 by Computer Hope
HTML and other related languages.

Centering text is generally used for a title of a website or document. To center text using HTML, you can use the <center> tag or use a CSS property. To proceed, select the option you prefer and follow the instructions.

Using the <center></center> tags

One way to center text or put it in the middle of the page is to enclose it within <center></center> tags.

<center>Center this text!</center>

Inserting this text within HTML code would yield the following result:

Center this text!

Note

The <center> tag is now considered deprecated. Although it may still work, it's expected to be removed in favor of using CSS. We recommend you use the style sheet method (shown below) to center text in HTML.

Using a style sheet property

You can center the text of a website with CSS by specifying the text-align property of the element to be centered.

Centering a few blocks of text

If you only have one or a few blocks of text to center, add the style attribute to the element's opening tag and use the "text-align" property. In the example below, we've added them to the <p> tag.

<p style="text-align:center">Center this text!</p>

The "text-align" property is set to "center" to indicate the element is centered in the middle of the page or containing div.

Multiple blocks of text

If you have many blocks of text to center, use CSS inside <style></style> tags in the head section or in an external style sheet. See the example code below for how to set all text inside the <p></p> tags to be centered.

<style>
p {
 text-align:center
}
</style>

The text in every set of <p></p> tags is centered on the page. If you would like some paragraphs centered, while others are not, you can create a style class, as seen in the code below.

<style>
.center {
 text-align: center
}
</style>

If you're creating a center class, as shown in the example above, a paragraph can be centered using the code below, which "calls" the center class.

<p class="center">Center this text!</p>
Tip

Once a class is created, it can be applied to any HTML tag containing words, images, and most other elements. For example, if you wanted the heading to be centered, you could add class="center" to the <h1> tag or another heading tag.