How to Center Text in HTML
One of the first things we learn as programmers is how to align blocks of text. In this article, we’ll take a look at how to align text in the center of your container using the style and align attributes.
Style Attributes
When we are working with a div in html, we can use the style attribute to incorporate inline-styling. We’ll use the CSS property text-align to center our text in the <div>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center with Style Attribute</title>
</head>
<body>
<div class="container" style="text-align:center;">
<p>Text to center</p>
</div>
</body>
</html>Align Attributes
We can use align attributes when we are working with tables in HTML. It will only work on <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr> elements.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Center with Align Attribute</title>
</head>
<body>
<table border=1 width="800" align="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr align="center">
<td>January</td>
<td>$100</td>
</tr>
<tr align="center">
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>The big thing to remember when you are learning to center text is that the alignment depends on the container it’s in. If the container only takes up half the page, it’ll center itself across the length of that container and not the whole page.
That’s all there is to it! You now know how to center text across a <div> element and <table> elements.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
