How to Align Text in HTML?
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages.
HTML is used by the browser to manipulate text, images, and other content to display it in the required format.
Text Alignment
We can change the alignment of the text using the text-align property. We can align the text in the center, Left, Right.
Property | Description | Values | Example |
text-align | Specifies the horizontal alignment of text or block of text | left(Default)/right/center/justify | text-align: right |
Value | Description |
left | The text will align to the left |
right | The text will align to the right |
center | The text will align to the center |
The text alignment can be done with CSS(Cascading Style Sheets) and HTML Attribute tag.
Note: The left alignment of the text is default. If we do not write text align attribute then our text will automatically be aligned to the left.
Aligning text using CSS
CSS stands for Cascading Style Sheets, HTML allows the use of these CSS to perform changes in the style of the content on a Webpage. For example, here we will use CSS to align text in an HTML Code.
Method 1: Align text to the center
HTML
< html > < head > < title >Text alignment</ title > < style > h1{text-align: center;} </ style > </ head > < body > < h1 >w3wiki</ h1 > </ body > </ html > |
Method 2: Align text to right
HTML
< html > < head > < title >Text alignment</ title > < style > h1{text-align: right;} </ style > </ head > < body > < h1 >w3wiki</ h1 > </ body > </ html > |
Method 3: Align text to left
HTML
< html > < head > < title >Text alignment</ title > < style > h1{text-align: left;} </ style > </ head > < body > < h1 >w3wiki</ h1 > </ body > </ html > |
Note: The text aligned to left is default.
Aligning Text using HTML align attribute
Method 1: Align text to center
HTML
< html > < head > < title >Text alignment</ title > </ head > < body > < h1 align = "center" >w3wiki</ h1 > </ body > </ html > |
Method 2: Align text to right
HTML
< html > < head > < title >Text alignment</ title > </ head > < body > < h1 align = "right" >w3wiki</ h1 > </ body > </ html > |
Method 3: Align Text to Left
HTML
< html > < head > < title >Text alignment</ title > </ head > < body > < h1 align = "left" >w3wiki</ h1 > </ body > </ html > |
Note: The text aligned to left is default.
Contact Us