CSS Text Alignment: Horizontal Alignment and Vertical Positioning

Master CSS text alignment. Learn how to align text blocks horizontally, control final line alignment, format text directions, and align inline elements vertically.

Introduction

Aligning text is about structure and reading flow. Whether you are centering a main title on a landing page hero block, justifying a newsletter snippet for structured column rendering, or aligning an icon vertically beside a text link, alignment dictates the symmetry and balance of your web layouts.

In CSS, text alignment is managed using a set of horizontal and vertical positioning properties. Understanding how block-level and inline elements respond to these properties is key to avoiding broken layouts and building clean, responsive interfaces.

What You Will Learn

  • How to align text block content horizontally using text-align.
  • Formatting the last line of a text block using text-align-last.
  • Controlling text reading directions (LTR vs. RTL) using direction and unicode-bidi.
  • Vertically aligning inline elements and table cells using vertical-align.

Prerequisites

Detailed Explanation: Horizontal Alignment

Horizontal alignment defines how text spans within its container. This is controlled by the text-align property:

1. The text-align Property

This property is applied to a parent block-level container (like <div> or <p>) and affects all inline and inline-block content inside it:

  • left: Aligns text to the left margin. Standard for left-to-right (LTR) languages.
  • right: Aligns text to the right margin. Standard for right-to-left (RTL) languages.
  • center: Centers the text horizontally. Best for short titles and captions.
  • justify: Stretches the text lines so that every line has equal width (matching both left and right margins), automatically expanding spacing between words.
.card__title {
  text-align: center;
}

2. Text Align Last (text-align-last)

Controls how the browser aligns the very last line of a block container, which is especially useful when the main text is justified:

  • Values: left, right, center, justify, auto.
p.justified-article {
  text-align: justify;
  text-align-last: left; /* Prevents the last short line from stretching across the screen */
}

3. Bidirectional Text Direction (direction)

Controls the reading direction of text.

  • ltr: Left-to-right (Default for English, Hindi, etc.).
  • rtl: Right-to-left (Used for Arabic, Hebrew, etc.).
  • Usage: Often combined with unicode-bidi to manage mixed-language content.

Detailed Explanation: Vertical Alignment

Horizontal alignment applies to block-level containers. To align elements vertically relative to neighboring inline text, we use vertical-align.

> [!IMPORTANT] > The vertical-align property ONLY works on inline, inline-block, or table-cell elements. It has absolutely no effect on block-level elements (like a <div> or <p> tag) unless their display state is explicitly modified.

Common vertical-align Values

  • baseline: (Default) Aligns the baseline of the element with the baseline of the parent.
  • sub / super: Aligns the element as subscript or superscript.
  • top / bottom: Aligns the top or bottom of the element with the tallest/lowest inline element on the current line.
  • middle: Aligns the vertical midpoint of the element with the baseline of the parent plus half the x-height. Perfect for aligning icons with text.

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Horizontal Text Align
    Left[text-align: left <br> Ragged right edge]
    Center[text-align: center <br> Balanced centering]
    Justify[text-align: justify <br> Straight left & right edges]
    end

Code Examples

Example 1: Aligning Icons with Text

Align a vector checkmark icon beside a list item:

.list-item {
  font-size: 16px;
  line-height: 24px;
}

.list-item__icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  
  /* Align midpoint of icon with midpoint of neighboring text */
  vertical-align: middle; 
  
  margin-right: 8px;
}

.list-item__text {
  /* Inline element inherits default vertical alignment */
  vertical-align: middle;
}

Example 2: Justifying Columns for News Layouts

Create newspaper-style readable columns using alignment controls:

.editorial-column {
  width: 300px;
  float: left;
  margin-right: 20px;
}

.editorial-column p {
  font-size: 14px;
  line-height: 1.5;
  
  /* Justify blocks to form clean column grids */
  text-align: justify;
  
  /* Ensure the final line doesn't look stretched or distorted */
  text-align-last: left; 
}

Best Practices & Common Mistakes

  • Avoid Long Center-Aligned Text: Never center-align long-form body paragraphs. Center alignment creates uneven left margins, making it hard for the reader's eye to locate the start of the next line. Limit centering to short titles under 3 lines.
  • Vertical Align on Blocks: A common beginner error is declaring vertical-align: middle; on a div block to center its child cards. For block-level centering, use Flexbox or CSS Grid instead.

FAQs

Q: Can I use text-align to center a block-level container itself? A: No. Applying text-align: center; to a parent only centers the inline contents inside it (like text, images, and spans). To center a block container itself, use margin: 0 auto; alongside a set width.

Q: How does direction: rtl affect layout flow? A: Changing the direction to rtl automatically flips the layout, moving the text flow, scrollbar location, and default alignment to the right side of the screen.

Summary

CSS alignment defines the position of content. Horizontal alignment within blocks is controlled via text-align and text-align-last. Vertical alignment of inline components and table blocks utilizes vertical-align, configuring middle, top, or baseline offsets.

Related Articles

Next Tutorial

How do we apply visual modifications like underlines, uppercase transforms, and text shadows? Let's check: Text Decoration.

← Back to Syllabus