Grow your CSS skills. Land your dream job.

text-align

Last updated on:

The text-align property in CSS is used for aligning the inner content of a block element.

p {
  text-align: center;
}

These are the traditional values for text-align:

  • left - The default value. Content aligns along the left side.
  • right - Content aligns along the right side.
  • center - Content centers between the left and right edges. White space on the left and right sides of each line should be equal.
  • justify - Content spaces out such that as many blocks fit onto one line as possible and the first word on that line is along the left edge and the last word is along the right edge.
  • inherit - The value will be whatever the parent element's is.

"Content" is used here as as term instead of "text", because while text-align certainly effects text, it effects all inline or inline-block elements in that container.

There are two new values in CSS3 as well, start and end. These values make multiple language support easier For example, English is a left-to-right (ltr) language and Arabic is a left-to-right (rtl) language. Using "right" and "left" for values is too rigid and doesn't adapt as the direction changes. These new values do adapt:

  • start - Same as "left" in ltr, same as "right" in rtl.
  • end - Same as "right" in ltr, same as "left" in rtl.

There is also match-parent, which is similar to inherit, only that the new value is calculated against the current element's direction instead of, you know, not doing that.

There are a few things in the spec that don't have any browser support yet. One is the value "start end" which would align the first line as if was "start" and any subsequent lines as if it was "end". Another is giving the value a string, like text-align: "." start; The text will aline along the first occurrence of that <string>, as in to line up a column of numbers along a decimal point.

Examples

This text is left aligned.

This text is right aligned.

I'm centered!

I'm justified. I fill the space exactly (except on the last line), even if I have to stretch a bit at times.

I inherit the alignment of my parent. In this case, that means left.

Other Resources

Browser Support

For left, right, center, justify:

Chrome Safari Firefox Opera IE Android iOS
Any Any Any 3.5+ 3+ Any Any

For start, end:

Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ 3.6+ None None Any Any

To do:

Add information about text-align-last

Comments

  1. ZOM
    Permalink to comment#

    Indeed a great post. Very informative, thanks a lot!

    p.s.
    in the start and end part, ” Arabic is a left-to-right (rtl) language.”

  2. luci
    Permalink to comment#

    Seems Opera 19 now supports text-align: start / end.

  3. Which display properties supports text-align, for example If I style h4 as
    h4{
    display:block;
    }
    Will it accept text-align:center property or not?

    • h4 is by default block level, what will happen if i float it or change it’s position from static, will it still accept text-align center or not?

    • no … it will be left aligned
      but you can use width:100%, it will accept text-align:center

  4. text-align:center is not working on position relative div with 10px padding. Any suggestions?

  5. TypeO

    Arabic is a left-to-right (rtl) language

    Should be

    Arabic is a right-to-left (rtl) language

    ?

  6. blyk
    Permalink to comment#

    Can you tell me how to align number with respect to decimal?
    *12.34
    **2.45
    120.13
    450.00

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".