How to center text in HTML

Updated: 01/24/2018 by Computer Hope

HTMLTo 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!

Note: 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 within the head section on the page (or in an external style sheet) to declare that every element 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 below code.

.center {
    text-align: center

If you're creating a center class, as shown in the previous example, 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 has been 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