CSS Text-Align Property



CSS Tutorial  >  Text  >  Text-align

The text-align property specifies how to align text horizontally. Possible values are:

  • left: left-justified
  • right: right-justified
  • center: text is centered
  • justify: text is both right- and left-justified

    Several examples are shown below:

    Example 1: Left align

    CSS Declaration

    p {text-align: left;}

    The following HTML,

    <p>This paragraph is an example of left justification.

    renders:

    This paragraph is an example of left justification.

    In Example 1, both lines are aligned to the left. This is the default behavior–without specifying text-align, this is what we would see.

    Example 2: Right align

    CSS Declaration

    p {text-align: right;}

    The following HTML,

    <p>This paragraph is an example of right justification.

    renders:

    This paragraph is an example of right justification.

    In Example 2, both lines are aligned to the right.

    Example 3: Aligned to the center

    CSS Declaration

    p {text-align: center;}

    The following HTML,

    <p>This paragraph is an example of being aligned to the center.

    renders:

    This paragraph is an example of being aligned to the center.

    In Example 3, the paragraph is centered.

    Example 4: Justified

    CSS Declaration

    p {text-align: justify;}

    The following HTML,

    <p>This paragraph is an example of full justification.

    renders:

    This paragraph is an example of full justification.

    In Example 4, the first line is aligned to both the left edge and right edge. As a result, there is more empty space between the words to achieve this effect.

    Next: CSS Text-Decoration




    Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact