Text Alignment in CSS

« Prev Next »

The text-align property specifies the horizontal alignment of text in an element.

The text-align is primarily used for block-level elements, such as div, p, h1, section, and similar elements.

 

Example

selector {
  text-align: value;
}
  • selector – The HTML element you want to style (e.g., p, h1, div).
  • value – The alignment value (e.g., left, center, right, justify).

css-text-alignment

Value Description
left Aligns the text to the left edge of the container (default).
center Aligns the text to the center of the container.
right Aligns the text to the right edge of the container.
justify Stretches the lines of text so that each line is aligned to both the left and right edges of the container.

Left Align Text

p {
  text-align: left;
}

The text in the <p> element will be aligned to the left of the container (default behavior for most block-level elements).

Center Align Text

h1 {
  text-align: center;
}

The text in the <h1> element will be aligned to the center of the container.

 

Right Align Text

p {
  text-align: right;
}

The text in the <p> element will be aligned to the right of the container.

 

Justify Align Text

p {
  text-align: justify;
}

The text in the <p> element will be justified, meaning that the text will stretch to fill the entire width of the container, with equal spacing between words.

 

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      text-align: left;
    }

    h1 {
      text-align: center;
    }

    .right-align {
      text-align: right;
    }

    .justify-align {
      text-align: justify;
    }
  </style>
</head>
<body>

<h1>Welcome to My Website</h1>

<p>This paragraph is left-aligned. The text will start from the left edge of the container.</p>

<p class="right-align">This paragraph is right-aligned. The text will align to the right edge of the container.</p>

<p class="justify-align">This paragraph is justified. The text will stretch and space out so that it fills the entire width of the container, creating a clean edge on both sides.</p>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.