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.
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
<!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>
We can use align attributes when we are working with tables in HTML. It will only work on
<!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.
- Career Karma matches you with top tech bootcamps
- Get exclusive scholarships and prep courses
That’s all there is to it! You now know how to center text across a
<div> element and
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.