HTML attribute tags and CSS (Cascading Style Sheets) can be used to align text.
Technique 1: Orient text to the center; Technique 2: Orient text to the right; Technique 3: Orient text to the left
Text can be aligned to the center, right, or left using the first three methods.
Use the style
attribute and the CSS property text-align
to set the alignment of text in HTML for the left, right, and center.
Since HTML5 does not support the <p>
tag’s align
attribute, text alignment is set using the CSS style.
Remember that using a style
attribute overrides any globally defined styles.
Now let’s explore how to align text within HTML code.
There are numerous options available to you with CSS for aligning text.
The text-align
property is the main CSS property that functions well with text alignment.
This property is used to indicate the text’s HORIZONTAL alignment within an element.
The standard syntax is as follows:
text-align: value; selector {
}
You can apply this property to any tag that contains text on your page, including the div
tag, heading, paragraph, and body
tag, if you want the text to be aligned throughout.
LEFT
: This is used to align the text with the page’s or container’s left edge.RIGHT
: This aligns the text with the page’s or container’s right edge.CENTER
: This is used to position the texts exactly in the middle of the page or container.JUSTIFY
: This allows you to reposition text so that it touches the page’s or container’s left and right edges.
If your text was originally aligned on the right, you may need to change it to the left. To accomplish this, select the selector and set the text-align
property’s value to left
along with it.
The text on the page can be aligned to the left by styling the body
tag. Your webpage, the content inside the container, and other elements begin from the left by default.
The text-align
property with a value right
allows you to align this content to the right, which is where you might want to align it.
You can now center your text by using the text-align
property in conjunction with the center
value, as opposed to using the center
tag to do so.
The justify
text icon functions similarly to any other text-based tool that you are familiar with, such as Google Docs or Microsoft Word, or content-handling programs like Photoshop, Figma, and many others.
It is used to ensure that your text extends to the edges of a page or container, eliminating the need for extra, uneven space at the end.
The text-align
property is used in conjunction with justify
as its value to achieve this.
Now let’s look at how to align text to the right.
The appearance and orientation of the paragraph’s edges are determined by alignment. Text can be centered, justified (equally aligned along the left and right margins), left-aligned, or right-aligned.
For instance, the left edge of a paragraph aligned to the left is flush with the left margin in a left-aligned paragraph (the most common alignment).
Click ALIGN LEFT
or ALIGN RIGHT
in the PARAGRAPH
group on the HOME
tab.
Choose which text you wish to center.
Click CENTER
in the PARAGRAPH
group on the HOME
tab.