CSS text-align

The CSS text-align property sets the horizontal alignment of text inside block elements. It has an effect similar to the familiar left align, right align, center and justify in word processors. In fact these are the four most common values used for the property.

text-align: left|right|center|justify|start|end
text-align: right;
text-align: start;   /* left for LTR, right for RTL languages */

start means left in left to right languages and right in right to left languages and end, well... the opposite.

Browser Support: Supported by all browsers.

Using text-align

Because left aligning is the default in most languages, text-align is mostly used to right-align or center text:

div.centered {
text-align: center;
}
centered
div.right-aligned {
text-align: right;
}
right aligned

Justifying text for the web

Justifying text with CSS is as easy as text-align: justify, however, it's generally a bad idea. Justified text is harder to read on screen because of the irregular spacing introduced between words.

If you want to use justified text, try to use long lines of text to prevent long words from causing trouble.

div.justified{
text-align: justify;
}
Text is justified by incrementing the spacing between words, but letter spacing remains uniform. Long words may cause undesired extreme spacing.

Aligning in RTL languages

Right-to-Left scripts like Arabic are usually right aligned. When combining with a Left-to-Right language, things would get confusing if we only had left and right options. That's why CSS introduced start and end. start will always give the conventional aligning: right in RTL and left in LTR scripts and end just the opposite. The direction of the script is set using the CSS direction property:

div.rtl{
direction: rtl; text-align: start;
} div.ltr{
direction: ltr; text-align: start;
}
המלצת בקרבת ארץ אם.
LTR scripts to the left

text-align won't align block elements

text-align will align the inline content of block elements, which is not just text but also images, for example. However, text-align won't align block elements like divs. Properties like margin and float help in that task.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>