Using CSS text-align property we can horizontally set the text of an element. We can set it to left, right, justify or center.
Syntax
The syntax of CSS text-align property is as follows −
Selector { text-align: /*value*/ }
Example
The following exmples illustrate CSS text-align property −
<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 8px; max-width: 200px; border: thin solid; } p { text-align: right; } div:nth-child(3) { text-align: center; } div:last-child { text-align: justify; } </style> </head> <body> <h2>Student Examination Details</h2> <div> <div>Student John</div> <div> Student Tom <p>Did not appeared for the exams.</p> </div> <div>Student Brad</div> <div>Did not appeared for only the last exam.</div> </div> </body> </html>
Output
This gives the following output −
Example
<!DOCTYPE html> <html> <head> <style> td { padding: 10px; box-shadow: inset 0 0 21px yellow; } td:first-of-type { text-align: right; } </style> </head> <body> <h2>Demo Heading</h2> <table> <tr> <td>This is it!</td> </tr> <tr> <td>Well, this is a demo text!</td> </tr> </table> </body> </html>
Output
This gives the following output −