Code has been added to clipboard!

The CSS Text-Align Property

Reading time 2 min
Published Aug 10, 2017
Updated Sep 30, 2019

How to align text in HTML

To define the horizontal alignment of the text within an HTML element, you can use the CSS text-align property:

Example
h1 {
  text-align: left;
}

The CSS text-align syntax

To apply the text-align property, you need to define one out of six available values:

text-align: value;

Check out an example of using CSS text-align below:

Example
h1 {
  text-align: center;
}
h2 {
  text-align: right;
}  
h3 {
  text-align: left;
}

All the available properties for using text-align are explained in the table below:

Value Description
center The default value. Makes CSS center text in an element
left Makes CSS align text along the left edge of the element
right Makes CSS align text along the right edge of the element
justify Makes CSS justify text: the first and the last words are aligned to the edges of the element, and the content is spaced to fill the line
start Works like left when the text direction is left-to-right and like right when it's right to left
end Works like right when the text direction is left-to-right and like left when it's right to left
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

Using text-align-last

You can also use the text-align-last property to define how the last line of the text should be aligned:

Example
p {
    text-align: justify;
    text-align-last: center;  
}

As with text-align, you only need to define one value. You can use all the values available to text-align, plus the auto keyword which is also the default value. Using auto makes CSS align the last line in the same manner the whole text is aligned.

Note: if text-align is set to justify, auto will behave as start.

Browser support

Browser image
Chrome
1+
Browser image
Edge
12+
Browser image
Firefox
1+
Browser image
IE
3+
Browser image
Opera
All
Browser image
Safari
1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
-

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/01/2021
3176 People Used
Only 97 Left
Rating
5.0