How to Center Text in HTML?

In this article, we consider that you want to center text horizontally. In case you need to center both horizontally and vertical, check this article – How to center an element/a div horizontally and vertically?

Centering text grab visitor’s attention and is useful in different situations like centering page title, centering different headings in the webpage, calls-to-action etc.

Problem:

You want to center all the text of a webpage.

Solution:

Use CSS property text-align:center in the body tag. See the example below-

Example–

<style>
    body{text-aligh:center;}
</style>

Problem:

You want to center all the headings of a webpage.

Solution:

Use CSS property text-align:center. See the example below-

Example–

<style>
  h1, h2, h3, h4, h5, h6{text-aligh:center;}
</style>

Problem:

You want a pure HTML solution to center text.

Solution:

Unfortunately, there is no valid pure HTML way to center text in HTML5. In previous HTML version, <center> tag was used to center text horizontally (see, the example below). But, from HTML version 4, it was deprecated. Even, some browsers may still support this tag, you should use this now.

Example-

<center>Don’t use this tag anymore to center text as it was deprecated.</center>

Problem:

You want to center text inside a table.

Solution:

You should use text-align attribute to center table data. Previously, <align> tag was used to center table data (See the example below). But, it was deprecated in HTML4, so, don’t use this tag.

Example-

<table>
  <tr>
    <td>
      <align>Don’t use this tag anymore to center table data as it was deprecated.</align>
    </td>
  </tr>
</table>