How to center text in HTML

Updated: 05/01/2023 by Computer Hope

Centering text is generally used for a title of a website or document. To center text using HTML (HyperText Markup Language), you can use the <center> tag or use a CSS (Cascading Style Sheets) 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 in <center></center> tags.

<center>Center this text!</center>

Using the example HTML code above yields 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 text on 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 added the attribute and property 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 or in an external style sheet. See the example code below for how to set all text in 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 want 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 objects. For example, if you want a heading to be centered, you could add class="center" to the <h1> tag or another heading tag.

Examples of centered text and objects

Below are examples of using the style attribute and "text-align" property to center text and objects on a web page.

Centering text in a paragraph

HTML code:

<p style="text-align:center">Example of centered text in a paragraph.</p>

Result:

Example of centered text in a paragraph.

Centering an image

HTML code:

Result:

Computer Hope

Centering a URL hyperlink

HTML code:

<p style="text-align:center"><a href="https://www.computerhope.com/">Computer Hope home page</a></p>

Result:

Computer Hope home page

Centering text in a <h3> header tag

HTML code:

<h3 style="text-align:center">Example of centered text in a header tag</h3>

Result:

Example of centered text in a header tag

Centering text in a <div> tag

HTML code:

<div style="text-align:center">
<p>Example of a centered sentence in a div tag.</p>
<p>Example of a second centered sentence in a div tag.</p>
</div>

Result:

Example of centered sentence in a div tag.

Example of a second centered sentence in a div tag.