Not Found
To set text alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML
tag, with the CSS property text-align for the center, left and right alignment. HTML5 do not support the align attribute of the
tag, so the CSS style is used to set text alignment.
Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML tag or external style sheet.
Example
You can try to run the following code to set text alignment in HTML
Live Demo
HTML DocumentTutorial
Learn for free
Updated on 15-Jun-2020 07:33:27
- Related Questions & Answers
- How to set alignment to text in text flow layout?
- How to set Heading alignment in HTML?
- Set Text Alignment using CSS
- Set Text Alignment Working with CSS
- Java Program to set alignment for text in JLabel
- How to set the horizontal alignment of text with JavaScript?
- How to set text direction in HTML?
- How do we set the alignment according to surrounding elements in HTML?
- How to set text font family in HTML?
- Setting Text Alignment using CSS
- Text alignment in a Matplotlib legend
- How do we set text font in HTML?
- How to set vertical alignment for a component in Java?
- How to set that the text direction will be submitted in HTML?
- How to set the horizontal alignment of an element with JavaScript?
Example
Set the text alignment for different
div.a {
text-align: center;
}
div.b {
text-align: left;
}
div.c {
text-align: right;
}
div.c {
text-align: justify;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The text-align property specifies the horizontal alignment of text in an element.
Show demo ❯
| left if direction is ltr, and right if direction is rtl |
| yes |
| no. Read about animatable |
| CSS1 |
| object.style.textAlign="right" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| text-align | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
CSS Syntax
text-align: left|right|center|justify|initial|inherit;
Property Values
| left | Aligns the text to the left | Demo ❯ |
| right | Aligns the text to the right | Demo ❯ |
| center | Centers the text | Demo ❯ |
| justify | Stretches the lines so that each line has equal width [like in newspapers and magazines] | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Another text-align example:
h2 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Text Alignment
HTML DOM reference: textAlign property
CSS Text Alignment and Text Direction
In this chapter you will learn about the following properties:
text-aligntext-align-lastdirectionunicode-bidivertical-align
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
The following example shows center aligned, and left and right aligned text [left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left]:
Example
h2 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Try it Yourself »
When the text-align property is set to "justify", each line is
stretched so that every line has equal width, and the left and right margins are straight [like in magazines and newspapers]:
Text Align Last
The text-align-last property specifies how to align the last line of a text.
Example
Align the last line of text in three
elements:
p.a {
text-align-last: right;
}
p.b {
text-align-last: center;
}
p.c {
text-align-last: justify;
}
Try it Yourself »
Text Direction
The direction and
unicode-bidi properties can be used to change the text direction of an element:
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
Example
Set the vertical alignment of an image in a text:
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
Try it Yourself »
The CSS Text Alignment/Direction Properties
| direction | Specifies the text direction/writing direction |
| text-align | Specifies the horizontal alignment of text |
| text-align-last | Specifies how to align the last line of a text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |