HTML and CSS provide different ways in order to align text. Text alignment is simply providing the location or site of the given text. Text alignment generally provides some direction like right , center ,left etc.
Text alignment can be done by using mainly the CSS text-align attribute which is explained below in detail. Also <p> tag align attribute, <div> tag align attribute and <center> tag can be also used for specific alignment purposes.
Align Text with text-align CSS Attribute
The most popular method for text alignment is using the text-align attribute of the CSS. Most of the text related to HTML tags like headers, paragraphs, etc. provide the text-align CSS attribute.
Align Text Right with text-align
We will start by aligning the text to the right. We will use the text-align:right like below.
<html>
<body>
<h1 style="text-align:right;">Right Aligned Heading1</h1>
<h2 style="text-align:right;">Right Aligned Heading2</h2>
<p style="text-align:right;">Right Aligned Paragraph Text.</p>
<div style="text-align:right;">Right Aligned Div Text</div>
</body>
</html>
Align Text Center with text-align
We can center different HTML tags like h1, h2, div or p like below by using text-align CSS attribute for them.
<html>
<body>
<h1 style="text-align:center;">Centered Heading1</h1>
<h2 style="text-align:center;">Centered Heading2</h2>
<p style="text-align:center;">Centered Paragraph Text.</p>
<div style="text-align:center;">Centered Div Text</div>
</body>
</html>
Align Text Left with text-align
In the following example, we will align the given header, paragraph, and div to the left.
<html>
<body>
<h1 style="text-align:left;">Left Aligned Heading1</h1>
<h2 style="text-align:left;">Left Aligned Heading2</h2>
<p style="text-align:left;">Left Aligned Paragraph Text.</p>
<div style="text-align:left;">Left Aligned Div Text</div>
</body>
</html>
Align Text with <p> align Attribute
<p> is the paragraph HTML tag used to create text paragraph. The text paragraph can be aligned with the align attribute and right ,center , left values like below.
<html>
<body>
<p align="left">Left Aligned Paragraph Text.</p>
<p align="center">Center Aligned Paragraph Text.</p>
<p align="right">Right Aligned Paragraph Text.</p>
</body>
</html>
Align Text with <div> align Attribute
The div tag can be used to align text. The align attribute is used to align to right, center, left like below.
<html>
<body>
<p align="left">Left Aligned Div Text.</p>
<p align="center">Center Aligned Div Text.</p>
<p align="right">Right Aligned Div Text.</p>
</body>
</html>
