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

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

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

Mobile browser support

Chrome
18+
Firefox
4+
Opera
All
Safari
-
Tutorial
CSS3 Features
Syntax
Classes
ID Selectors
Attribute Selectors
Stylesheets
Inline
Internal
External
Box Model
Children Selectors
Pseudo Classes
Pseudo Elements
Variables
Counters
Text
Fonts
Web Fonts
Backgrounds
Background Images
Colors
Gradients
Opacity / Transparency
Shadow Effects
Transitions
Tooltip
Transform
Animations
Layout — Display
Layout — Position
Layout — Float
Layout — Clear
Layout — Horizontal & Vertical Align
Multiple Columns
Introduction
Responsive Web Design — Viewport
Responsive Web Design — Grid View
Responsive Web Design — Media Queries
Responsive Web Design — Flexbox Layout
Responsive Web Design — Images
Responsive Web Design — Videos
Borders
Margin
Padding
Width
Height
Outline
Links
Lists
Tables
Dropdown Menu
Navigation Bar
Images
Image Gallery
Border Images
Forms
Rounded Corners
Buttons
Box-Sizing
Selector Reference
Pagination Examples
Code Examples
CSS3 Browser Support Reference
Functions Reference
Speech Module Reference
Units
Web Safe Font Combinations
Cheat Sheet
:hover
@font-face
@keyframes
@media
align-content
align-items
align-self
all
animation
backface-visibility
background
background-clip
background-color
background-image
background-origin
background-position
background-size
border
border-image
border-radius
border-style
box-shadow
box-sizing
color
columns
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-weight
hanging-punctuation
justify-content
line-height
margin
offset
opacity
order
outline
overflow
padding
perspective
position
resize
tab-size
text-align
text-decoration
text-emphasis
text-transform
text-shadow
transform
transition-property
translate
vertical-align
word-break
word-wrap
z-index