The text-align Property in CSS

The text-align property in CSS is used to set the horizontal alignment of text within an element. It controls how text is aligned relative to its containing block and affects the positioning of inline content. This property is essential for controlling text flow and layout in web design.

Values of text-align

1. left

   • Description: Aligns the text to the left edge of the containing block. This is the default alignment for left-to-right text.
   • Example:

     .left-align {
       text-align: left;
     }
     

2. right

   • Description: Aligns the text to the right edge of the containing block. This is commonly used for right-to-left text or when aligning text in certain design layouts.
   • Example:

     .right-align {
       text-align: right;
     }
     

3. center

   • Description: Centers the text horizontally within the containing block. Useful for creating a balanced and symmetrical layout.
   • Example:

     .center-align {
       text-align: center;
     }
     

4. justify

   • Description: Justifies the text, meaning it aligns both the left and right edges of the text block with the containing block's edges. Extra space is added between words to ensure that text fills the entire width of the container.
   • Example:

     .justify-align {
       text-align: justify;
     }
     

5. start

   • Description: Aligns the text to the start edge of the containing block, depending on the text direction. For left-to-right text, this is equivalent to left; for right-to-left text, it is equivalent to right.
   • Example:

     .start-align {
       text-align: start;
     }
     

6. end

   • Description: Aligns the text to the end edge of the containing block, depending on the text direction. For left-to-right text, this is equivalent to right; for right-to-left text, it is equivalent to left.
   • Example:

     .end-align {
       text-align: end;
     }
     

Examples

1. Left Alignment

   .left-align {
     text-align: left; /* Aligns text to the left edge */
   }
   

2. Right Alignment

   .right-align {
     text-align: right; /* Aligns text to the right edge */
   }
   

3. Center Alignment

   .center-align {
     text-align: center; /* Centers text horizontally */
   }
   

4. Justify Alignment

   .justify-align {
     text-align: justify; /* Justifies text, aligning both edges */
   }
   

5. Start Alignment

   .start-align {
     text-align: start; /* Aligns text to the start edge based on text direction */
   }
   

6. End Alignment

   .end-align {
     text-align: end; /* Aligns text to the end edge based on text direction */
   }
   

Explanation

• left: Aligns text to the left edge of its container, which is the default alignment for most western languages.
• right: Aligns text to the right edge, which is useful for right-to-left languages or specific design needs.
• center: Centers text horizontally within its container, commonly used for headings or decorative text.
• justify: Creates a block of text that is aligned on both the left and right edges by adjusting the spacing between words. It is often used in newspaper and magazine layouts.
• start and end: Provide alignment based on the text direction (left-to-right or right-to-left), offering more flexibility for multilingual designs.

Use Cases

• Text Alignment: Control the alignment of headings, paragraphs, and other text elements to fit the design layout.
• Readability: Adjust alignment to enhance the readability of text, such as centering headings or justifying body text.
• Design Aesthetics: Align text to achieve desired visual effects and maintain consistency across different sections of a webpage.