If you’re new to front-end development, the disparity between what a plain HTML document produces in your browser and the reality of what a modern website looks like can seem very daunting.
One of the first things you might notice is that all your HTML text is aligned to the left of your webpage by default. Though there’s no practical method for center aligning your text in HTML, there’s a CSS property that can accomplish this with ease.
In this tutorial article, you’ll learn how to center align text on web pages using CSS.
What Is the CSS Text-Align Property?
The CSS text-align property is a CSS feature used to arrange text on a web page. This property can be assigned one of several values depending on the layout that you want to achieve on your web page. The CSS text-align property is frequently assigned the following values.
- Left (aligns text to the left of a web page and is also the default alignment)
- Right (aligns text to the right of a web page)
- Center (aligns text to the center of a web page)
- Justify (ensures that each line of text has the same width)
Center Aligning Text On a Web Page
Given that most languages are read from left to right, aligning text to the left of a web page by default is practical. However, there will be instances when center aligning text is a more practical approach (such as headings and subheadings).
Simple HTML Web Page Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Alignment</title>
</head>
<body>
<div class="container">
<div id="box-1">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
<div id="box-2">
<h1>Heading</h1>
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum distinctio eum ex,
repellat beatae in quasi eligendi enim dolorem ipsam. Ab necessitatibus sunt
commodi ad fugit soluta provident dolorem distinctio?</p>
</div>
</div>
</body>
</html>
The HTML file above will generate the following web page in your browser.
As you can see from the output above, all the text is aligned to the left. There’re several methods you can use to center align the text above, but first, you need to identify which text you want to center align.
If the goal is to center align all the text on your web page, then the following code will accomplish this.
Center Aligning All Text Example
.container{
text-align: center;
}
The CSS code above uses a class property to target all the text on the web page, and this is only possible because there’s a parent <div> tag with a container class enclosing all the text on the web page. The code will produce the following output in your browser.
As you can see, all the text on the web page is now center-aligned. The only problem is that the paragraph would look better and be more readable if it was aligned to the left. In instances when you only want to center align some of the text on a web page, you can use HTML elements as selectors instead of classes and ids.
Center Aligning Specific Text Example
h1, h3{
text-align: center;
}
The code above only targets h1 and h3 elements on a web page, and will produce the following output in your browser.
Center Aligning a Div On a Web Page
Another trend that you might notice among modern websites is that the text doesn’t go all the way to the edges. This is one of the instances when the parent div is utilized. Though there’s no div align property in CSS, the margin property can be used to center align a parent div and its content.
Center Aligning Div Example
.container{
max-width: 920px;
margin: auto;
}
The code above does several things. First, it assigns a width to all the content on the web page, using the class of the parent div. You should always use the max-width property instead of the width property when placing website content into containers, as this facilitates responsiveness by defining a maximum width instead of a fixed width.
The code above also utilizes the margin property to place the parent div in the center of the web page, producing the following output in the browser.
As you can see from the image above, the width of the text has been reduced to 920px, and the invisible container enclosing the text is now in the center of the webpage thanks to the margin property.
How Does the Margin Property Work?
The margin property can be assigned a combination of three different values. When four values are assigned to the CSS property, each value will target one of the four sides of an HTML element.
When two values are assigned to the margin property the first value will target the top and bottom sides of the HTML element and the second value will target the left and right sides of the HTML element.
In the example above, the margin property is only assigned one value which means it targets the left and right side of the HTML element (which in this case is the parent <div> tag).
The margin property is usually assigned values that are in the pixels unit or, as in the example above, the auto value. The auto value ensures that the margin used on either side of the HTML element is equal. This effectively places the parent div element (and by extension the text) in the center of the web page, providing you with a layout that reflects modern web pages.
What You Can Do Now
This tutorial article teaches you several things:
- How to use the text-align property to center text on a web page.
- How to center align different groups of texts enclosed by <div> tags or other HTML elements.
- How to center a group of text using the margin property on a parent div.
However, this is only the tip of the iceberg as it relates to CSS tools that can be used to organize your website layout. One of the most popular CSS properties that can be used to especially map out the structural layout of your web page (including center aligning text) is the CSS Grid.
CSS Grid provides a two-dimensional (rows and columns) layout structure for your web pages, with a framework that's easy to learn and utilize.