Aligning text in html to the right

CSS Text Alignment

In this chapter you will learn about the following properties:

• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left):

Example

When the text-align property is set to «justify», each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):

Example

Text Align Last

The text-align-last property specifies how to align the last line of a text.

Example

Align the last line of text in three

elements:

Text Direction

The direction and unicode-bidi properties can be used to change the text direction of an element:

Example

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

Example

Set the vertical alignment of an image in a text:

img.a <
vertical-align: baseline;
>

img.b vertical-align: text-top;
>

img.c vertical-align: text-bottom;
>

The CSS Text Alignment/Direction Properties

Property	Description
direction	Specifies the text direction/writing direction
text-align	Specifies the horizontal alignment of text
text-align-last	Specifies how to align the last line of a text
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align	Sets the vertical alignment of an element

Источник

text-align

The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box. This means it works like vertical-align but in the horizontal direction.

Try it

Syntax

/* Keyword values */ text-align: start; text-align: end; text-align: left; text-align: right; text-align: center; text-align: justify; text-align: justify-all; text-align: match-parent; /* Character-based alignment in a table column */ text-align: "."; text-align: "." center; /* Block alignment values (Non-standard syntax) */ text-align: -moz-center; text-align: -webkit-center; /* Global values */ text-align: inherit; text-align: initial; text-align: revert; text-align: revert-layer; text-align: unset; 

The text-align property is specified in one of the following ways:

• Using the keyword values start , end , left , right , center , justify , justify-all , or match-parent .
• Using a value only, in which case the other value defaults to right .
• Using both a keyword value and a value.

Values

The same as left if direction is left-to-right and right if direction is right-to-left.

The same as right if direction is left-to-right and left if direction is right-to-left.

The inline contents are aligned to the left edge of the line box.

The inline contents are aligned to the right edge of the line box.

The inline contents are centered within the line box.

The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.

Same as justify , but also forces the last line to be justified.

Similar to inherit , but the values start and end are calculated according to the parent’s direction and are replaced by the appropriate left or right value.

When applied to a table cell, specifies the alignment character around which the cell’s contents will align.

Accessibility concerns

The inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as Dyslexia.

Formal definition

Initial value	start , or a nameless value that acts as left if direction is ltr , right if direction is rtl if start is not supported by the browser.
Applies to	block containers
Inherited	yes
Computed value	as specified, except for the match-parent value which is calculated against its parent’s direction value and results in a computed value of either left or right
Animation type	discrete

Formal syntax

text-align =
start |
end |
left |
right |
center |
justify |
match-parent |
justify-all

Examples

Start alignment

HTML

p class="example"> Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula. p> 

CSS

.example  text-align: start; border: solid; > 

Источник

CSS text-align Property

The text-align property specifies the horizontal alignment of text in an element.

Default value:	left if direction is ltr, and right if direction is rtl
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.textAlign=»right» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
left	Aligns the text to the left	Demo ❯
right	Aligns the text to the right	Demo ❯
center	Centers the text	Demo ❯
justify	Stretches the lines so that each line has equal width (like in newspapers and magazines)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Another text-align example:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to align text in HTML

“Hypertext markup language” is the basic language of designing a website. Html is known to be a front-end language to design the interface of a website. There are many functions regarding this language. The commands used for designing are known as tags. These tags combine to develop a website. A single HTML code file is responsible for a static website that is not running. Html contents are text, image, shapes, color, alignment, etc. Alignment is an important ingredient in designing as it determines the respective content to handle at a specific place. We will discuss some basic examples in this guide.

Tools required

To elaborate on the concept of alignment in HTML, we need to mention some necessary tools required to run the HTML code. One is a text editor, and the second one is a browser. A text editor maybe a notepad, sublime, notepad ++, or any other that might help. In this guide, we have used notepad, a default application in windows, and Google Chrome as a browser.

HTML format

To understand the alignment, we need first to have some know-how of HTML basics. We have presented the screenshot of a sample code.

HTML has two main parts. One is the head, and the other one is the body. All tags are written in angular brackets. The head part deals with naming the html page by using the tag of “title”. And also, use the style statement inside the head. On the other hand, the body deals with all other tags of text, images or videos, etc. in other words, whatever you want to add to your html page is written in the body part of html.

One thing I need to highlight here is the tag opening and closing. Each tag that is written must be closed. For instance, Html has starting tag of and the ending tag is . So it is observed that the ending tag has a slash followed by the tag name. Similarly, all other tags also follow the same approach. Each text editor is then saved with the extension of html. For example, we have used a file with the name example.html. Then you will see that the notepad icon has changed into the browser icon.

As alignment is content of styling. Style in html is of three types. An in-line style, internal and external styling. Inline implies in the tag. Internal is written inside the head. At the same time, the external style is written in a separate CSS file.

Inline styling of text

Example 1

Now it’s time to discuss an example here. Consider the image displayed above. In that file of notepad, we have written a simple text. When we run it as a browser, it will show the output given below in the browser.

If we want this text to be displayed in the center, we will alter the tag.

This tag is an inline tag. We will write this tag when we will introduce the paragraph tag in the html body. After the text, then close the paragraph tag. Save and then open the file in the browser.

The paragraph is aligned in the center, as it is displayed in the browser. The tag used in this example is used for any alignment, i.e., for left, right, and center. But if you want to align the text in the center only, then a specific tag is used for this purpose.

The center tag is used before and after the text. This will also show the same result as the previous example.

Example 2

This is an example of aligning the heading instead of a paragraph in the html text. The syntax for this alignment of heading is the same. This can be done through both the tag or by inline styling or adding the align tag inside the heading tag.

The output is shown in the browser. The heading tag has converted the plain text into a heading, and the tag has aligned it in the center.

Example 3

Align the text in the center

Consider an example in which there is a paragraph displayed in the browser. We need to align this in the center.

We will open this file in the notepad and then align it in the center position by using the tag.

After adding this tag in the paragraph tag, please save the file and run it on the browser. You will see that the paragraph is now centered aligned. See the image below.

Align the text to the right

To lean the text to the right is similar to position it in the center of the page. Just the “center” word is replaced by “right” in the paragraph tag.

The changes can be seen through the image appended below.

Save and refresh the web page in the browser. The text is now moved to the right side of the page.

Internal styling of text

Example1

As described above that internal css (cascading style sheet) or internal styling is a type of css that is defined in the head part of html of the page. It works similarly to internal tags do.

Consider the page shown above; it contains the headings and paragraph in it. We have a requirement to see the text in the center. Inline alignment requires the manual writing of tags inside every paragraph. But internal styling can be automatically applied to each paragraph of the text by mentioning p in the style statement. There is then no need to write any tag inside the paragraph tag. Now observe the code, and it’s working.

This tag is written within the style tag in the head part. Now run the code in the browser.

When you execute the page in the browser, you will see that all the paragraphs are aligned in the center of the page. This tag is applied to every paragraph present in the text.

In this example, just like a paragraph, we will align all the headings in the text to the right side. For this purpose, we will mention headings in the style statement inside the head.

Now after saving the file, run the notepad file in the browser. You will see that the headings are aligned on the right side of the HTML page.

Example 3

In internal styling, there might be a situation where you need to align the text of only some paragraphs in the text while others remain the same. Hence, we are using the concept of class. We introduce the class with a dot method inside the style tag. It is necessary to add the name of the class inside the paragraph tag you want to get aligned.

We have added the class in the first three paragraphs. Now run the code. You can see in the output that the first three paragraphs are aligned in the center, whereas others are not.

Conclusion

This article explained that alignment could be done in different ways through inline and internal tags.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.

Источник