CSS text-align to Horizontally Center Element

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

Explore Program

Example 2: Centering the Header Using text-align

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.