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.
Table of Contents:
What is text-align in CSS, and How Does It Work?
The text-align center in CSS is used for centering the text horizontally. The CSS text-align property takes 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 to Center Text Horizontally Using text-align?
The text-align center in CSS 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.
Common Values of text-align in CSS
| Property |
Description |
| text-align: left |
Aligns the text and inline elements to the left. |
| text-align: right |
Aligns the text and inline elements to the right. |
| text-align: center |
Aligns the text to the center and the inline elements within the parent container. |
Advantages of Using text-align for Centering
- Flexible Alignment Options
Besides centering, it allows for left and right alignment, giving you versatile control over horizontal content positioning.
- Simple and Readable
text-align is easy to understand and implement, making it ideal for beginners and quick layout adjustments.
- Great for Inline Elements
It works perfectly for centering inline and inline-block elements such as text, images, and buttons within a container.
- Wide Browser Support
text-align center in CSS is supported across all modern and older browsers, ensuring consistent rendering.
- No Extra CSS or Markup Needed
You can center content without modifying HTML structure or adding additional wrappers or CSS properties.
Examples on How to Center Text using text-align in CSS
Example 1: Center a Div Horizontally Using CSS text-align
To center the div element using the text-align property, followed by adding CSS text-align to center text 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
Example 2: Center Headings Horizontally with CSS text-align
The header can be centered using the CSS text-align property, and 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: Center a Paragraph with CSS 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.
Example 4: Centering an Image Using text-align
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
text-align: center;
}
</style>
</head>
<body>
<div class="image-container">
<img src="./intellipaatLogo.png" alt="Centered Image">
</div>
</body>
</html>
Output:
Explanation: In this example, you are using the text-align property to center the image in HTML. Here, the src attribute contains the URL of the image, and the alt attribute contains the alternate text that the browser displays if the image is not loaded.
Get 100% Hike!
Master Most in Demand Skills Now!
Conclusion
Proper text alignment enhances readability and visual appeal in web design. Using text-align center in CSS, developers can easily improve the layout and structure of their content. The CSS text-align to center text property ensures that elements are aligned correctly, making it simple to horizontally center text using CSS. Whether you need to center heading with text-align or refine CSS horizontal alignment, these techniques provide consistency across various screen sizes, improving user experience.
Alternative Methods to Horizontally Center the Element
CSS text-align to Horizontally Center Element – FAQs
Q1. How to center text using text-align in CSS?
You can use the text-align property in your CSS and set it to center on the parent container. This will horizontally center the text inside that element.
Q2. How do you center a fixed element horizontally in CSS?
Set position: fixed; left: 50%; transform: translateX(-50%); to center the element relative to the viewport.
Q3. How do I center text in a cell horizontally?
Use text-align: center; on the <td> or <th> element to align text within a table cell.
Q4. How to adjust text position in CSS?
Use text-align, vertical-align, position, or margin properties to control text placement.
Q5. How to use CSS text-align center for inline elements?
The text-align: center property works effectively for inline and inline-block elements. Applying it to the parent block-level container will center the inline content inside.
Q6. How to align div content center using text-align?
To center the content of a div, especially inline or text content, apply text-align: center to the div or its parent container. This method is simple and widely supported.
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 x,y 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.