How to Set Text Position in HTML (Complete + Image)

Setting the position of the text on the website is certainly very important. If the text on your website is not neat, of course people or your website visitors are lazy to read the contents of the website or even they will never visit it again because the position of the text on your website is messy. Therefore, the position of the text is very influential in a website.

How to Set Text Position in HTML

To set the position of text in HTML is actually not difficult. Because HTML already provides properties in CSS that you can use very easily. Immediately, please see the following explanation.

1. Text Alignment

In adjusting the position of text in HTML, there are generally 4 types, namely left-aligned, right-aligned, center-aligned, and left-right aligned. To position the text like that, you need CSS and a property that supports it called text-align. Later in the CSS script you will use these properties. Immediately, here is an example of using text-align in CSS.

The explanation of the script above is:

.left {text-align: left} is a class that is used to left align the selected text
.right { text-align: right;} is a class that is used to right align the selected text
.center { text-align: center;} is a class used to center align the selected text
.justify { text-align: justify;} is a class used to align left and right of the selected text.

The point is to adjust the position of the text either left, right, center, or left and right, you only need to add property text-align followed by the desired position in English pronunciation. It’s easy, right?

Then, next is the script for the body tag section.

Belajar Rata Teks CSS: text-align Text Align: Left Lorem ipsum dolor sit amet, consecteturadipiscing elit. Nulla erat dolor, ullamcorper in ultricieseget,fermentum rhoncus leo. Curabitur eu mi vitae metusposuere laoreet. Eam facilis omittantur at, usu efficianturneglegentur delicatissimi et, in per vero splendidepersequeris. Text Align: Right Lorem ipsum dolor sit amet, consecteturadipiscing elit. Nulla erat dolor, ullamcorper in ultricieseget,fermentum rhoncus leo. Curabitur eu mi vitae metusposuere laoreet. Eam facilis omittantur at, usu efficianturneglegentur delicatissimi et, in per vero splendidepersequeris. Text Align: Center Lorem ipsum dolor sit amet, consecteturadipiscing elit. Nulla erat dolor, ullamcorper in ultricieseget,fermentum rhoncus leo. Curabitur eu mi vitae metusposuere laoreet. Eam facilis omittantur at, usu efficianturneglegentur delicatissimi et, in per vero splendidepersequeris. Text Align: Justify Lorem ipsum dolor sit amet, consecteturadipiscing elit. Nulla erat dolor, ullamcorper in ultricieseget,fermentum rhoncus leo. Curabitur eu mi vitae metusposuere laoreet. Eam facilis omittantur at, usu efficianturneglegentur delicatissimi et, in per vero splendidepersequeris.

Well, in this part of the body you just call the class that you want. For example, in the example above, you want to make the first paragraph left-aligned, so please add class=”left” on tags

. So did the others.

The image below is an example of the display results from the script above. Good luck!

How to Set Text Position in HTML

2. Text Direction

Text direction is different from the previous text alignment. This CSS property can set the direction of text, and columns in the table. This text direction can be used if you want to write from right to left like Arabic or Hebrew, or languages written from left to right like English and other languages.

To write from right to left, the value created is rtl (right to left), while for writing from left to right the value is ltr (left to right). Immediately, the following is an example of the script.

This is the default text direction.
This is right-to-left text direction.
 طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد

To create a text direction there are 2 properties that you must use, namely:

direction: rtl (adjusted to the desired value)
unicode-bidi: bidi-override

The image below is an example of the display results from the script above. Good luck!

How to Set Text Position in HTML with Text Direction

So this article discusses how to set the position of text in HTML. You can use some of the properties above according to your needs. Hopefully this article can be helpful and useful for you. Thank you