How to Center Text in HTML and CSS
In this tutorial, I will show you how to center text in HTML and CSS both horizontally and vertically using various methods such as different CSS properties, flexbox, etc. And it will greatly impact your web page’s accessibility and appearance.
There are many benefits of centering text in HTML and CSS. It improves readability by making text simpler to read, particularly headers and titles.
This tutorial is divided into two parts. In the first part, we’ll discuss all the tactics to center text in HTML in the horizontal direction. In the second part, we’ll see all the methods to center text in HTML in the vertical direction.
Now, let’s start with the first part and learn how to center text horizontally using HTML and CSS.
Part 1: Center Text Horizontally
We have different methods to center text horizontally using CSS. Let’s begin with our first method.
Method 1: Use text-align Property
CSS property is one of the most common ways to center text horizontally. You can apply this CSS property to any HTML element like <h1>, <p>, <div> etc. Let’s see a code example to know how this property works.
First of all, in the following HTML, I made a container using <div> and placed a small text paragraph inside it.
<div class="container"> <!-- Text paragraph --> <p> Lorem ipsum igendi reiciendis repellat sapiente? </p> </div>
After that, I used the following, simple CSS styles to make the container visible on screen.
.container{ background-color: aliceblue; padding: 5px; border: 1px solid #444; height: 340px; }
The output is looking like this below:
Now, I will apply the text-align property to the container to align the text in the center of the container. The code is below.
.container { text-align: center; }
Now, if you see the output below in the image, the text is successfully aligned in the center.
Now we have horizontally centered all of the text within a container by setting its text-align property to center.
This basic CSS rule centers all text content within the given container horizontally. This method works well for centering paragraphs, headers, and other block-level elements.
Furthermore, you can apply this property to any HTML element like <h1> as shown below:
h1{ text-align: center; }
The above code will center the heading.
The text-align property has 3 different values:
text-align: left | center | right;
Method 2: Use Flexbox to Center Text Horizontally
CSS flexbox is another method that, you can use to center the text in HTML. All you have to do is just set the display property to flexbox and justify-content to center. Let’s see the code example.
The HTML code will remain unchanged as shown below.
<div class="container"> <!-- Text paragraph --> <p> Lorem ipsum igendi reiciendis repellat sapiente? </p> </div>
The following CSS code utilizes the flexbox technique to center text:
.container{ display: flex; justify-content: center; } .container{ background-color: aliceblue; padding: 5px; border: 1px solid #444; height: 340px; }
The Output of the above code:
What if you want to align the text vertically center? Don’t worry, let’s see that in the next part.
Part 2: Center Text Vertically
Vertical centering can be more challenging, especially when working with different container heights. To center text vertically within a container, we can use two different methods. Let’s see the first method.
Method 1: Use align-items Property
The CSS align-items property can be used with the combination of a flexbox to center the text vertically. So, let’s see an example to know how this property works.
In the following HTML, I am using the same <div> container with a text paragraph inside it to demonstrate.
<div class="container"> <!-- Text paragraph --> <p> Lorem ipsum igendi reiciendis repellat sapiente? </p> </div>
Now, in CSS code, I will use the flexbox with both align-items and justify-content properties like this below. It will center the text both vertically as well as horizontally.
.container{ display: flex; justify-content: center; align-items: center; }
The text is centered as shown below in the output:
Also, I used the same previously used code for making the container visible as shown below:
.container{ background-color: aliceblue; padding: 5px; border: 1px solid #444; height: 340px; }
Furthermore, if you remove the justify-content property then the text will only be centered vertically.
Method 2: Use Grid to Center Text
Using a grid is another efficient way to center text in CSS whether it’s text paragraphs, headings, containers, or any other HTML element. CSS grid allows us to align both horizontally and vertically.
Note: Before going to see that, you must have the necessary knowledge of using Grids. However, it’s really simple to use.
In the following CSS code, I set display property to grid and used place-items property to center text both horizontally and vertically.
.container{ display: grid; place-items: center; }
The HTML code will remain unchanged as shown below.
<div class="container"> <!-- Text paragraph --> <p> Lorem ipsum igendi reiciendis repellat sapiente? </p> </div>
But the below CSS code for styling the container is must otherwise you will not see any result for applying the above CSS.
.container{ background-color: aliceblue; padding: 5px; border: 1px solid #444; height: 340px; }
Now, the text is both horizontally and vertically centered in a container as shown below in the image.
That’s all.
Conclusion
In this tutorial, we explored different methods to center text in HTML and CSS such as CSS properties like text-align, flexbox, grid, align-items, justify-content, and place-items. Understanding each method mentioned in this article, whether they are for aligning text horizontally, vertically, or both, will allow you to beautifully present the text on your webpage.
Hope you liked this tutorial. Keep experimenting with these techniques.
Also, read about how to center the HTML table.
Don’t forget to help others by sharing this tutorial:
Topic: CSS
