Introduction

The text-align property in CSS is a key tool for web developers and designers. It controls the horizontal alignment of text within a block element or table-cell box. By setting the text-align property, you can determine how text and other inline elements are positioned within their container. This is essential for creating visually appealing and well-structured web pages.

Syntax

The text-align property is simple to use. It is specified with a single keyword value. Here’s the syntax:

text-align: keyword;

Values

Here are the keyword values you can use with the text-align property:

• start: Aligns text to the start of the line box (left for left-to-right languages, right for right-to-left languages).
• end: Aligns text to the end of the line box (right for left-to-right languages, left for right-to-left languages).
• left: Aligns text to the left edge of the line box.
• right: Aligns text to the right edge of the line box.
• center: Centers the text within the line box.
• justify: Justifies the text by adding spaces between words to make each line fit the width of the container, except for the last line.
• justify-all: Similar to justify, but also forces the last line to be justified.
• match-parent: Aligns text based on the parent element’s direction.

Formal Definition

The text-align property controls the horizontal alignment of inline content within a block-level element.

• Initial Value: The default value is start.
• Applies To: Block containers and table-cell boxes.
• Inherited: Yes, it is inherited from the parent element.
• Computed Value: As specified, except for match-parent.
• Animation Type: Not animatable.

Examples

Start Alignment

Aligns text to the start of the line box.

HTML:

<p class="start-alignment">
  This text is aligned to the start.
</p>

CSS:

.start-alignment {
  text-align: start;
  border: solid;
}

Centered Text

Centers text within a container.

HTML:

<p class="centered-text">
  This text is centered.
</p>

CSS:

.centered-text {
  text-align: center;
  border: solid;
}

Right Alignment

Aligns text to the right edge of the line box.

HTML:

<p class="right-alignment">
  This text is aligned to the right.
</p>

CSS:

.right-alignment {
  text-align: right;
  border: solid;
}

Justified Text

Justifies text by adding spaces between words.

HTML:

<p class="justified-text">
  This text is justified.
</p>

CSS:

.justified-text {
  text-align: justify;
  border: solid;
}

Table Alignment

Demonstrates text alignment in table elements.

HTML:

<table>
  <caption>
    Example table
  </caption>
  <thead>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th class="right">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="right">
      <td>11</td>
      <td class="center">12</td>
      <td>13</td>
    </tr>
    <tr class="center">
      <td>21</td>
      <td>22</td>
      <td>23</td>
    </tr>
    <tr id="r3">
      <td class="right">31</td>
      <td>32</td>
      <td>33</td>
    </tr>
  </tbody>
</table>

CSS:

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}

thead {
  text-align: left;
}

td,
th {
  border: solid 1px black;
}

.center {
  text-align: center;
}

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

Accessibility

Using the text-align property requires considering accessibility, especially for users with cognitive concerns like dyslexia. Here are some tips:

• Avoid Justified Text for Long Paragraphs: Justified text can disrupt reading flow. Use left-aligned text for long paragraphs.
• Use Centered Text Sparingly: Centered text can be hard to read for long passages. Use it for headings or short sections.
• Consider Readability: Make sure the text is easy to read. Clear and consistent alignment helps all users.

Key Specifications

CSS Logical Properties and Values Level 1

The text-align property is detailed in the CSS Logical Properties and Values Level 1 specification. This document provides a comprehensive overview, including its syntax, values, and expected behavior. It ensures that text-align aligns with the logical properties framework, making it easier to use in responsive and internationalized designs.

• Reference: [CSS Logical Properties and Values Level 1 - text-align]WebsiteUrl

CSS Text Module Level 3

The text-align property is also defined in the CSS Text Module Level 3 specification. This document provides additional details on how to use text-align with other text-related CSS properties. It includes information on advanced alignment techniques and how text-align interacts with other CSS properties.

• Reference: [CSS Text Module Level 3 - text-align-property]WebsiteUrl

Understanding these specifications helps web developers ensure their use of the text-align property is compliant with web standards.

Browser Compatibility

The text-align property is widely supported across all major web browsers. Here is a summary of the browser compatibility:

Chrome

• Version: 1.0 (December 2008)
• Support: Full support for all standard values.

Firefox

• Version: 1.0 (November 2004)
• Support: Full support for all standard values.

Internet Explorer / Edge

• Version: 3.0 (August 1996)
• Support: Full support for all standard values.

Opera

• Version: 3.5 (November 1998)
• Support: Full support for all standard values.

Safari

• Version: 1.0 (June 2003)
• Support: Full support for all standard values.

For the most accurate and up-to-date information on browser compatibility, you can refer to the Browser Compatibility Data (BCD) tables provided by the Mozilla Developer Network (MDN).

See Also

To further enhance your understanding and usage of the text-align property, you may also find the following related properties and resources helpful:

• [margin: auto]WebsiteUrl: Used for centering block-level elements horizontally.
• [margin-left: auto]WebsiteUrl: Used for controlling the left margin of an element.
• [vertical-align]WebsiteUrl: Used for vertical alignment of inline and table-cell elements.

These related properties and resources can help you achieve more complex and precise layouts in your web development projects.

For more comprehensive guides and references, you can explore the following resources:

• [MDN Web Docs CSS Reference]WebsiteUrl: A comprehensive guide to CSS properties, including detailed explanations and examples.
• [W3C CSS Specifications]WebsiteUrl: The official documentation for CSS, providing detailed specifications and guidelines.
• [Can I Use]WebsiteUrl: A useful tool for checking the compatibility of CSS properties across different browsers.

By utilizing these resources, you can deepen your knowledge of CSS and improve your web development skills. This will help you create more effective and visually appealing web content, ensuring a better user experience for your audience.