CSS: text-align property
This CSS tutorial explains how to use the CSS property called text-align with syntax and examples.
Description
The CSS text-align property defines how the the text of an element is aligned within its parent block element.
Syntax
The syntax for the text-align CSS property is:
text-align: value;
Parameters or Arguments
- value
The alignment of the text. It can be one of the following:
Value Description left Text is left aligned
div { text-align: left; }right Text is right aligned
div { text-align: right; }center Text is centered
div { text-align: center; }justify Text is justified (ie: line up the left and right edges of the paragraph)
div { text-align: justify; }start If direction is left-to-right, the text will be left aligned.
If direction is right-to-left, the text will be right aligned.
div { text-align: start; }end If direction is left-to-right, the text will be right aligned.
If direction is right-to-left, the text will be left aligned.
div { text-align: end; }inherit Element will inherit the text-align from its parent element
div { text-align: inherit; }
Note
- The text-align property only aligns the inline content (ie: text) of an element within its parent block element.
- The text-align property does not align a block element itself, only the inline content.
Browser Compatibility
The CSS text-align property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the text-align property below, exploring examples of how to use this property in CSS.
Using Center
Let's look at a CSS text-align example where we center the text.
div { text-align: center; }
In this CSS text-align example, we have centered the text in the <div> tag.
Using Left Align
Next, let's look at a CSS text-align example where we left-align the text.
div { text-align: left; }
In this CSS text-align example, we have left-aligned the text in the <div> tag.
Using Right Align
Let's look at a CSS text-align example where we right-align the text.
div { text-align: right; }
In this CSS text-align example, we have right-aligned the text in the <div> tag.
Advertisements