Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Set Text Alignment in HTML
To align text in HTML, use the style attribute to define the CSS text-align property. Just keep in mind, that the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet.
HTML style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS text-align property for the center, left, and right alignment. HTML5 does not support the align attribute of the <p> tag, so the CSS style is used to set text alignment.
Different Alignment of Text
Examples of Text Alignment
The examples below will illustrate the different alignment options of text.
Align Text to Center
In this example, we will create two paragraph elements and align the second paragraph element to the center of the screen.
<!DOCTYPE html>
<html>
<body>
<strong>Default Aligned Text</strong>
<p>TutorialsPoint</p>
<strong>Center Aligned Text</strong>
<p style="text-align:center;">TutorialsPoint</p>
</body>
</html>
Align Text to the Right
In this example, we will create two paragraph elements and align the second paragraph element to the right side of the screen.
<!DOCTYPE html>
<html>
<body>
<strong>Default Aligned Text</strong>
<p>TutorialsPoint</p>
<strong>Right Aligned Text</strong>
<p style="text-align:right;">TutorialsPoint</p>
</body>
</html>
Align Text to Left(Default)
In this example we will create two paragraph elements and align the second paragraph element to the left side of the screen. But the default alignment is also the left aligned
<!DOCTYPE html>
<html>
<body>
<strong>Default Aligned Text</strong>
<p>TutorialsPoint</p>
<strong>Left Aligned Text</strong>
<p style="text-align:left;">TutorialsPoint</p>
</body>
</html>
You can use HTML dir attribute to set the alignment as well but it will not work if there is any special character at the end or start. This attribute is used to set the direction.
236K+ Views
