Skip to content
Related Articles

Related Articles

How to Align Text in HTML?

Improve Article
Save Article
  • Last Updated : 24 Jun, 2021
Improve Article
Save Article

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 DescriptionValuesExample
text-alignSpecifies the horizontal alignment of text or block of textleft(Default)/right/center/justifytext-align: right
ValueDescription
leftThe text will align to the left
rightThe text will align to the right
centerThe 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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!