You can use the CSS property text-align to center the element horizontally. This method works well for text and inline-level elements such as <span>, <img>, <button>, etc. You can align these elements to the left, right, or center of their parent element.
This property is applied to the parent element, like <p> or <section>, for controlling its inline or inline-block child elements. This property doesn’t work for the block-level element until it is set to display: inline-block.
What is text-align in CSS?
The text-align property in CSS is used for centering the text horizontally. It has the values like left, right, center, and justify. It is a powerful property for centering the text. This property is suitable for the inline element for controlling the alignment.
How Does text-align Horizontally Center an Element?
The text-align property can be used for horizontally centering an element. For centering text or inline elements, you can set the parent container to text-align: center. This makes all the child elements get aligned to the center. It suits well for the block containers such as div or p.
Values of text-align
| Property |
Effect |
| text-align: left |
You can align the text and inline elements to the left. |
| text-align: right |
You can align the text and inline elements to the right. |
| text-align: center |
You can align the text to the center and the inline elements within the parent container. |
Example 1: Centering the Div Using text-align
To center the div element using the text-align property, followed by adding CSS properties to the paragraph.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Alignment Example</title>
<style>
.container {
width: 40%;
background-color: white;
padding: 20px;
}
.left-align {
text-align: left; /* Aligns text to the left */
background-color: lightblue;
padding: 10px;
}
.center-align {
text-align: center;
background-color: lightblue;
padding: 10px;
}
.right-align {
text-align: right;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="left-align">
aligned to the left.
</div>
<div class="center-align">
text is centered.
</div>
<div class="right-align">
aligned to the right.
</div>
</div>
</body>
</html>
Output:
Explanation: The container is created with 40% width and 20px padding. The text is all aligned to the left, center, and right using .left-align, .center-align, and .right-align.
Easy-to-Follow Courses Designed for Absolute Beginners
Start Your Web Development Journey Today
The header can be centered using the text-align property, and CSS properties can be added to the header.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heading Alignment Example</title>
<style>
.container {
width: 40%;
background-color: white;
padding: 20px;
}
.left-align {
text-align: left;
background-color: lightcoral;
padding: 10px;
}
.center-align {
text-align: center;
background-color: lightcoral;
padding: 10px;
}
.right-align {
text-align: right;
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="left-align">Left Aligned Heading</h2>
<h2 class="center-align">Centered Heading</h2>
<h2 class="right-align">Right Aligned Heading</h2>
</div>
</body>
</html>
Output:
Explanation: The heading is aligned using left-aligned, center-aligned, and right-aligned. CSS properties can be added for styling the elements.
Example 3: Centering paragraph using text-align
The paragraph can be centered using the text-align property and adding some CSS properties for a paragraph.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paragraph Alignment Example</title>
<style>
.container {
width: 50%;
background-color: white;
padding: 20px;
}
.left-align {
font-size: 24px;
text-align: left;
background-color: lightblue;
padding: 10px;
}
.center-align {
font-size: 24px;
text-align: center;
background-color: lightblue;
padding: 10px;
}
.right-align {
font-size: 24px;
text-align: right;
background-color: lightblue;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<p class="left-align">This paragraph is left-aligned.</p>
<p class="center-align">This paragraph is center-aligned.</p>
<p class="right-align">This paragraph is right-aligned.</p>
</div>
</body>
</html>
Output:
Explanation: There are different properties for text-align, like left, right, and center, for aligning them horizontally in the center of the container. The paragraph is centered accordingly.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
You can use text-align to center the text and the inline element horizontally. The alignment can be adjusted using the left, right, or center properties. The above-discussed examples are used to center the div and h2 elements horizontally. A well-structured layout can be created for a webpage using this property.
The articles below offer a thorough introduction to the fundamental aspects of JavaScript programming.-
Include Another Html File In A Html File – Learn how to combine multiple HTML files by including one inside another in this blog.
How To Change The Css Background Opacity Of An Element – This blog covers methods to alter the CSS background opacity of an element.
Retrieve The Position Xy Of An Element Using Html – Learn techniques for retrieving the position (x, y) of HTML elements in this blog.
How To Change Input Typedate Format In Html – Find out how to implement date format changes for input fields in HTML in this blog.
Jquery Data Vs Attr – This blog provides insights on jQuery’s .data() and .attr() methods.
Lateral Join Vs Subqueries In Postgresql – Explore techniques for implementing lateral joins and subqueries in PostgreSQL in this blog.
How To Make An Element Width 100 Minus Padding – Explore how to make an element’s width equal to 100% minus padding in this blog.
Css Selectors And Specificity – Find out how CSS selectors and specificity affect your styles in this blog.
Why Dont Self Closing Script Elements Work – Find out why self-closing script elements don’t work in HTML through this blog.
Alternative Methods to Horizontally Center the Element
- Using Grid
- Using Flexbox
- Using margin:auto
- Using position: absolute
- Using float: right and float: left
- Using margin: 0 auto
- Using the display: table method