Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to Align Text in HTML?

  • Last Updated : 24 Jun, 2021

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.

Attention reader! All those who say programming isn't for kids, just haven't met the right mentors yet. Join the  Demo Class for First Step to Coding Coursespecifically designed for students of class 8 to 12. 

The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.

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
Recommended Articles
Page :