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 affects text, it affects 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 right-to-left (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.


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

Related Properties

Browser Support

For left, right, center, justify:

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

For the start and end values:

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


  1. User Avatar
    Permalink to comment#
  2. User Avatar
    Permalink to comment#

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

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

  3. User Avatar
    Permalink to comment#

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

  4. User Avatar
    Samiullah Khan
    Permalink to comment#

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

    • User Avatar
      Samiullah Khan
      Permalink to comment#

      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?

    • User Avatar

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

  5. User Avatar

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

  6. User Avatar


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

    Should be

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


  7. User Avatar
    Permalink to comment#

    Can you tell me how to align number with respect to decimal?

  8. User Avatar
    Permalink to comment#

    Hi, oh guru of CSS…

    Got a tricksy centred text issue I’m hoping you can help with…

    When I add a hard line break to some text, centring of text-lines is calculated to including any space before the BR tag.

    With natural break-points (no BR tag) text-lines centre ignoring any trailing space…

    It’s not a big deal but to a fussy designer type the text centre is obviously out.

    Is there any way you know of fixing this with just CSS – without the obvious fix of removing any spaces before the BR tag? [Multilingual CMS with various users – need to be able to do some basic typesetting without too much overhead]


    .center {text-align:center; width:145px; margin:2em 0; font: bold 20px/100% sans-serif; letter-spacing:-0.05em}
    the quick bron fox jumps over the lazy dawg
    the quick bron fox jumps over the lazy dawg

    Like I said – not a big difference – but…

    • User Avatar
      Permalink to comment#

      Code lost there…

      <style>.center {text-align:center; width:145px; margin:2em 0; font: bold 20px/100% sans-serif; letter-spacing:-0.05em}</style>
      <div class="center">the quick bron fox jumps over the lazy dawg</div>
      <div class="center">the quick bron <br>fox jumps over the lazy dawg</div>

    • User Avatar
      megavath bichu
      Permalink to comment#

      hi can you tell me short hand propety of box model

  9. User Avatar
    Summon Agus
    Permalink to comment#

    how I can make text align "start" by timing line like a Microsoft office 2013.

    • User Avatar
      Summon Agus
      Permalink to comment#

      For my project a Online Editor, http://root-editor.blogspot.com/

  10. User Avatar
    Permalink to comment#

    verry nice….

  11. User Avatar
    Permalink to comment#

    “…Arabic is a left-to-right (rtl) language”

    nope … it is not! It is a right-to-left language: rtl

  12. User Avatar
    Permalink to comment#

    Hi, I have an issue with centering my categories (on top of the post titles )on my blog.
    Text-align: center; is not working and I don’t know what to do.
    Anyone who got an idea? Thansk!

    The URL to my test-blog is:

  13. User Avatar
    Permalink to comment#

    Hi, the text alignment is center, but the words are in left alignment. How to give css for this.

  14. User Avatar

    when texts are justified, they just line up on the left hand side of the container. How can they be made to line up on both sides(like what we have in center justify, in ms-word or photoshop)?

  15. User Avatar
    Permalink to comment#

    Great, easy to follow CSS for a some one new to it like me. Thanks for posting !

  16. User Avatar
    Permalink to comment#

    Hey CSS Tricks Community i have a website called manabadi and i want to show my text align in equal at every end of my WordPress post without any irregularities please once review my post and suggest some tricks to do that here my blog url
    manabadi.co thanks

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.