Formatting the content of a webpage is crucial for enhancing its visual appeal and engaging users effectively. A popular practice is to center-align text.
In HTML, center alignment of text can be achieved by utilizing the "align" attribute along with the < center> tag. Both the "align" attribute and the <center> tag had compatibility in past iterations of HTML.
NOTE: 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
The alignment of text can be controlled using the < center> tag, which is used to specify center alignment for various elements.
Syntax:
< center>The content will come here.</center>
The format illustrated above consists of an initial tag denoted by <center> as the opening tag, followed by </center> as the closing tag. The information to be displayed is placed between these two tags and will be aligned to the center when rendered.
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 our tutorial </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:
In the displayed result, the content enclosed within the <h1> and <p> placeholders is centered.
Example 2:
In this instance, we will include numerous HTML tags within the <center> element.
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 our tutorial </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:
The displayed output illustrates that the content enclosed within each tag is aligned centrally on the webpage.
"Align" Attribute
Within HTML, the attribute known as "align" serves the purpose of positioning text either to the center, left, or right on a webpage. To apply this attribute, it should be included within the opening tag of the HTML element.
Syntax:
<tag align="center| left| right| justify">The content will come here.</tag>
- 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.
- 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 instance, we will demonstrate how to center-align the HTML elements.
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 instance, we will showcase how HTML elements can be aligned to the center, left, right, and justified positions.
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
- 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.