CSS text-align Property
The text-align property in CSS is used to specify the horizontal alignment of text in an element ie., it is used to set the alignment of the content horizontally, inside a block element or table-cell box.
Syntax:
text-align: left|right|center|justify|initial|inherit;
Default Value : left if direction is ltr, and right if direction is rtl
Property Value:
- left: It is used to set the text-alignment into left. This is the default property.
- right: It is used to set the text-alignment to right.
- center: It is used to set the text-alignment into the center.
- justify: It is used to spreads the words into the complete line i.e., by stretching the content of an element.
- initial: It is used to set an element’s CSS property to its default value.
- inherit: It is used to inherit a property to an element from its parent element property value.
Please refer to the CSS Align article for further details.
Example: This example illustrates the use of the text-align property, in order to align it to specified values.
HTML
<!DOCTYPE html> < html > < head > < title >text-align property</ title > < style > h1 { color: green; } .main { border: 1px solid black; } .gfg1 { text-align: left; } .gfg2 { text-align: right; ; } .gfg3 { text-align: center; } .gfg4 { text-align: justify; } </ style > </ head > < body > < h1 >GeeksforGeeks</ h1 > < h2 >text-align property</ h2 > < div class = "main" > < h3 >text-align: left;</ h3 > < div class = "gfg1" > The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </ div > </ div > < br > < div class = "main" > < h3 style = "text-align: right;" >text-align: right;</ h3 > < div class = "gfg2" > The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </ div > </ div > < br > < div class = "main" > < h3 style = "text-align: center;" >text-align: center;</ h3 > < div class = "gfg3" > The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </ div > </ div > < br > < div class = "main" > < h3 style = "text-align: justify;" >text-align: justify;</ h3 > < div class = "gfg4" > The course is designed for students as well as working professionals to prepare for coding interviews. This course is going to have coding questions from school level to the level needed for product based companies like Amazon, Microsoft, Adobe, etc. </ div > </ div > </ body > </ html > |
Output:
Supported Browsers: The browser supported by the text-align property are listed below:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0