Text Alignment in CSS - Control text-align and direction
Text alignment in CSS is not just visual - it directly affects readability and user experience.
In Arabic sites in particular, understanding text-align and direction is essential.
If you are looking for text-align in CSS, how to set RTL direction, or the difference between direction and text-align, this lesson explains it practically.
What Is Text Alignment in CSS?
The text-align property sets the horizontal position of text inside an element.
Common values:
left: align to the left.right: align to the right.center: center the text.justify: align both sides.
Simple definition: text-align controls where text appears horizontally inside an element.
How to Use text-align in CSS
.left-text {
text-align: left;
}
.center-text {
text-align: center;
}
.right-text {
text-align: right;
}
What does this code do? It gives each paragraph a different alignment based on its class.
Line by line:
left: text starts from the left.center: text is centered.right: text starts from the right.
Expected result: clear alignment changes without changing the content.
Common mistake: using text-align to center a div itself instead of its text.
Result in the browser:
This text is left aligned
This text is center aligned
This text is right aligned
Text Direction in CSS with direction
The direction property sets the base writing direction:
rtl: right to left (Arabic).ltr: left to right (English).
body {
direction: rtl;
}
What does this code do? It sets the page direction to suit Arabic.
Expected result: lines and text elements start from the right.
Common mistake: using only text-align: right without direction: rtl on a full Arabic page.
Result in the browser: direction: ltr
This line starts from the left side.
Result in the browser: direction: rtl
This line starts from the right side.
Using justify in CSS for Long Text
.article {
text-align: justify;
line-height: 1.9;
}
What does this code do? It aligns the paragraph on both sides and increases line spacing for readability.
Expected result: a look closer to newspaper or long-article layouts.
Common mistake: using justify on very short lines, which creates odd gaps.
Result in the browser:
This is an example paragraph aligned with text-align: justify in CSS. This approach works best for long text because it creates a balanced paragraph shape, but it may not be ideal for very short paragraphs.
What Is vertical-align in CSS?
The vertical-align property is not for vertically centering everything as many think.
It is mainly useful with inline elements like images inside text or table cells.
img.icon {
vertical-align: middle;
}
What does this code do? It vertically aligns the icon relative to the text line.
Common mistake: expecting vertical-align to center a full block element.
Result in the browser:
Text before the icon text after the icon
text-align vs direction in CSS
| Property | What It Controls | Example |
|---|---|---|
text-align |
Text position inside the element | text-align: center; |
direction |
Base writing direction (RTL/LTR) | direction: rtl; |
text-align: center to center a full block element.
For centering elements, you will learn Flexbox and layout methods later.
FAQ - Common Search Questions
How do I center text in CSS?
Use text-align: center; on the element that contains the text.
How do I make a site support Arabic in CSS?
Use direction: rtl; (usually on body) for Arabic sites.
What is the difference between text-align: right and direction: rtl?
text-align sets text position, while direction sets the writing flow direction.
When should I use justify in CSS?
For long paragraphs and articles, with a suitable line-height for readability.
Why is vertical-align not working for me?
Most likely because you applied it to a block element. It works mainly with inline/inline-block or table-cell.
direction between ltr and rtl and observe the difference.