CSS text-align

The text-align property is used to horizontally align elements. Basically, it is used to align inline-level elements inside block level elements. Thus, this property affects the inline and inline-block elements inside block-level elements.

This property affects the content of the element to which it is applied, and not the element.

CSS

text-align: value;

Values

left : Aligns the content to the left edge of the line box.

right : Aligns the content to the right edge of the line box.

center : Horizontally centers the content within the line box.

justify : Browser adjusts spacing in the text so that it starts from the left edge of the element and ends at the right edge, except for the last line of the text.

start : Specifies that the content is aligned to the starting edge of the line box. In simple words, it is the same as left if the direction is left-to-right and right if the direction is right-to-left.

end : Specifies that the content is aligned to the ending edge of the line box. In simple words, it is the same as right if the direction is left-to-right and leftif the direction is right-to-left.

match-parent : This is similar to inherit, but the inherited start and endvalues are specified according to the parent's direction.

start end : Specifies start alignment of the first line or any line after a forced line break and end alignment of the remaining lines.

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

New values in CSS3 specification

The four new values start, end, match-parent and start end are included in the CSS3 specification. However, these values should not be used because these are not included in the final recommendation.

Examples

HTML

<p id="para1">This text is left-aligned</p>
<p id="para2">This text is center-aligned</p>
<p id="para3">This text is right-aligned</p>

CSS

p {
  background-color: #A7C9A7;
}

#para1 {
  text-align: left;
}

#para2 {
  text-align: center;
}

#para3 {
  text-align: right;
}

See the Pen text-align examples by Aakhya Singh (@aakhya) on CodePen.

In the above demo, each paragraph is given a background color. Since p is a block level element, it covers the entire horizontal space available to it. On giving different text-align values to the three paragraphs, their content got aligned left, center and right with respect to their container respectively.

In another example given below, all the inline elements inside the div having class 'parent' are centered. The content of all the block level child elements of this div are also centered.

HTML

<div class="parent">
  
  <p class="child1">This is the first paragraph inside the div which is given 'text-align: center'. Since 'p' is a block level element and a child of this div, so its content also got centered. </p>
  
  <div class="child2">This 'div' is the second child of the parent div. Since 'div' is also a block level element, its content also got centered. The width of this child div is set to 400px.</div>
  
  <p class="child3">This paragraph is the third child of the parent div. It is given 'text-align: right' which overrode the value given to the parent div and made its content right aligned.</p>
  
</div>

CSS

.parent {
  text-align: center;
  font-size: 17px;
  font-family: 'Noto Sans', sans-serif;
}

.child1 {
  background-color: #A7C9A7;
}

.child2 {
  width: 400px;
  background-color: #C9A7A7;
}

.child3 {
  text-align: right;
  background-color: #A7C9C9;
}

See the Pen text-align example by Aakhya Singh (@aakhya) on CodePen.

Browser Support

This property is supported in Chrome, Firefox, Safari, IE3+, iOS, Opera and Android.