Open In App

How to Align Text in HTML?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>GeeksforGeeks</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>GeeksforGeeks</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>GeeksforGeeks</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">GeeksforGeeks</h1>
</body>
</html>



Method 2: Align text to right

HTML




<html>
<head>
    <title>Text alignment</title>
</head>
<body>
    <h1 align="right">GeeksforGeeks</h1>
</body>
</html>



Method 3: Align Text to Left

HTML




<html>
<head>
    <title>Text alignment</title>
</head>
<body>
    <h1 align="left">GeeksforGeeks</h1>
</body>
</html>



Note: The text aligned to left is default.



Last Updated : 24 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads