Text Align: CSS Horizontal Text Alignment Complete Guide

Understanding the text-align Property

The text-align property establishes the horizontal alignment of text and other inline content within a block-level element. It affects how text flows within its container, determining whether content sits flush against the left edge, right edge, centered, or justified across the width.

Proper text alignment is fundamental to professional web development services that deliver clean, readable interfaces. When combined with other typographic properties like line-height and letter-spacing, text-align creates cohesive and accessible reading experiences.

Property Syntax and Values

The text-align property accepts several keyword values, each serving different alignment scenarios. The initial value is start, which aligns text according to the writing direction of the document.

Browser Support and Compatibility

Text-align enjoys universal browser support across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. The property has been part of CSS since CSS1 and presents no compatibility concerns for contemporary web development.

text-align Values Explained

Understanding each text-align value helps you choose the right alignment for different content types and contexts.

Advanced: text-align-last Property

The text-align-last property controls the alignment of the final line of a paragraph or block, before any required line breaks. This property works in conjunction with text-align and becomes particularly relevant when using justified text.

.article-body {
 text-align: justify;
 text-align-last: left; /* Controls the final line */
}

text-align-last values:

• auto - Uses the same alignment as text-align
• start / end / left / right / center - Explicit final line alignment
• justify - Justifies the final line
• match-parent - Inherits from parent

Tip: For justified text, text-align-last: left or center often provides better visual results than allowing the justification algorithm to extend the final line with awkward spacing.

Accessibility Considerations

Text alignment significantly impacts readability for all users, but especially for those with visual impairments or cognitive differences. Following web accessibility guidelines ensures your content reaches the widest possible audience.

Users with dyslexia often struggle with justified text due to uneven word spacing, while screen magnifier users benefit from consistent left alignment to maintain their place within content blocks. Thoughtful alignment choices improve the user experience for everyone.

Practical Implementation

Basic Text Alignment Examples

/* Left-aligned body text (default for English) */
body {
 text-align: left;
}

/* Center-aligned headlines */
h1, h2, h3 {
 text-align: center;
}

/* Right-aligned for RTL languages */
[dir="rtl"] body {
 text-align: right;
}

/* Justified text with controlled final line */
.article-body {
 text-align: justify;
 text-align-last: left;
}

For complex layouts, combining text-align with CSS flexbox and CSS grid creates powerful responsive designs.

Related CSS Properties

Several CSS properties complement text-align for comprehensive text formatting:

Implementation Checklist

Use this checklist when implementing text alignment in web projects:

• Select appropriate alignment values for each content type
• Use text-align: start or end for internationalized content
• Pair text-align: justify with text-align-last for controlled final lines
• Test justified text at multiple viewport widths
• Avoid center alignment for extended body text passages
• Consider accessibility implications when choosing alignment
• Test across browsers to ensure consistent rendering
• Verify alignment with real content, not just placeholder text
• Need professional web development? Explore our services

Sources

1. MDN Web Docs - text-align
2. W3Schools - CSS text-align Property
3. GeeksforGeeks - CSS text-align Property