HTML Align Center

Styling the content on a web page plays an important role, as it makes the web page attractive and captures the attention of the users. It is very common to align the text in the center.

In HTML, the text can be aligned to the center with the help of the "align" attribute and by using the < center> tag. The "align" attribute and the <center> tag were supported in earlier versions of HTML.

NOTE: The "align" attribute and the <center> tag are no longer supported in HTML5 in order to favor CSS (Cascading Style Sheets) for styling web pages. It is recommended to use the "text-align" property of CSS to align text to the center instead of the HTML "align" attribute and the <center> tag.

HTML <Center> Tag

This tag specifies the center alignment of the text, so you can use the < center> tag to control the alignment of different elements.

Syntax:

The syntax shown above includes the <center> opening tag & </center> closing tag, and the content is written between the opening tag and the closing tag, which will be center-aligned.

Examples of Aligning Text to Center in HTML using < center> Tag

Example 1:

In this example, we have aligned the text written in <h1> and <p> tag using < center> tag.

Code:

<!DOCTYPE html>
<html lang=?en?>
<head>
    <meta charset=?UTF-8?>
    <meta name=?viewport? content=?width=device-width, initial-scale=1.0?>
    <title> Center align the text using Center tag </title>
</head>
<body>
    <div>
        <center> <h1> Welcome to Javatpoint </h1> </center>
        <p>
       < center> You are learning HTML online on JTP. </center>
        </p>
        <p> < center> This is example 1, which aligns the text to the center. </center>
        </p>
    </div>
</body>
</html>

Output:

As you can see in the output below, the text inside the <h1> and <p> tags is aligned to the center.

Example 2:

In this example, we will write many HTML tags inside the <center> tag.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name ="viewport" content="width=device-width, initial-scale=1.0">
    <title> Multiple HTML tags inside a center tag </title>
</head>
<body>
    <center>
        <h1> Welcome to Javatpoint </h1>
        <p> This is a paragraph of text that is centered using the <center> tag. </p>
        <div> <b> List items: </b>
        <ul>
            <li> Item 1 </li>
            <li> Item 2 </li>
            <li> Item 3 </li>
            <li> Item 4 </li>
            <li> Item 5 </li>
        </ul>
    </div>
    </center>
</body>
</html>

Output:

As you can see in the output below, the text inside each tag is centered on the web page.

"Align" Attribute

In HTML, the "align" attribute is used to align text in the center, left, or right on the web page. You can implement this attribute by writing it inside the opening HTML tag.

Syntax:

In the above syntax, <tag> is an HTML element on which the "align" attribute is applied.
The content comes inside opening <tag> and closing </tag>.
The "align" attribute in the syntax above has four possible values: center, left, right, and justify.
- align="center": It is used to align the text to the center.
- align="left": It is used to align the text to the left.
- align="right": It is used to align the text to the right.
- align="justify": It is used to adjust the text equally between the left and right edges of the element.

Examples of Aligning Text in HTML using the "Align" Attribute

Example 1:

In this example, we will align the HTML elements to the center.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aligning the HTML elements using the "align" attribute</title>
</head>
<body>
    <h1 align="center">Example of center aligning HTML elements</h1>  
    <p align="center">This is a paragraph of text that demonstrates how you can align text to the center using the align attribute.</p>
    <div align="center"> 
    <caption > <b>Table in the center</b> </caption> <br> <br>
    <table border="1">
        <tr>
            <th>Course</th>
            <th>Duration</th>
        </tr>
        <tr>
            <td align="center">HTML</td>
            <td align="center">1 month</td>
        </tr>
        <tr>
            <td align="center">CSS</td>
            <td align="center">1 month</td>
        </tr>
    </table>
</div>
</body>
</html>

Output:

Example 2:

In this example, we will demonstrate the alignment of HTML elements to center, left, right, and justify.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aligning text to center, left, right, and justify using "align" attribute</title>
</head>
<body>
    <h1 align="center">Example of aligning text to center, left, right, and justify using the "align" attribute..</h1>
    <h2 align="center">Center-Aligned Text</h2>
    <p align="center">This paragraph of text is aligned to center.</p>

    <h2 align="left">Left-Aligned Text</h2>
    <p align="left">This paragraph of text is aligned to left.</p>

    <h2 align="right">Right-Aligned Text</h2>
    <p align="right">This paragraph of text is aligned to right.</p>

    <h2 align="justify">Justified Text</h2>
    <p align="justify">This paragraph of text is justified.</p>
</body>
</html>

Output:

Browsers Support

Firefox
Microsoft Edge
Safari
Chrome
Opera
Firefox Mobile
Microsoft Edge Mobile
Safari Mobile
Opera Mobile

Conclusion

You have learned that you can center align text in two ways: using the <center> tag or using the align attribute.
To center align text using the <center> tag, you must write an HTML element inside it.
To center align text using the "align" attribute, you must put the "align" attribute inside the opening HTML tag.
The "align" attribute can have four possible values: center, justify, left, and right.
It is important to note the <center> tag and the align attribute need to be updated. Now, you can use the CSS text-align property to center-align the HTML elements.
Many browsers support the < center> tag and the "align" attribute, such as Firefox, Microsoft Edge, Safari, Chrome, Opera, Firefox Mobile, Microsoft Edge Mobile, Safari Mobile, and Opera Mobile.

Next TopicHTML Font Family

← prev next →