How to center text in HTML

Updated: 01/24/2018 by Computer Hope

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 is to enclose it within <center></center> tags. The following box has an example.

<center>Center this text!</center>

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

Center this text!


The <center> tag is now considered deprecated. Although it may still work, it is 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 text with CSS by specifying the text-align property of the element to be centered.

Centering a few blocks of text

If you have only one or a few blocks of text you need to center, you can do so by adding the style attribute to the opening tag of the element and choosing the property "text-align." In the example below, we've added them to the <p> tag:

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

Notice that the value of the property "text-align" was set to "center" which indicates that the element is to be centered.

Multiple blocks of text

If you have many blocks of text you would like to center, you can use CSS inside <style></style> tags in the head section of the page 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.

p {

The text will be centered within every set of <p></p> tags 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.

.center {
 text-align: center

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>

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

Additional information