text-align & text-indent

Text-align controls horizontal alignment of inline content within a block. Values include left, right, center, and justify. Text-indent adds space before the first line.

Text Align Values

Value	Alignment	Use Case
left	Left edge	Body text (default for LTR)
right	Right edge	RTL text, decorative
center	Center	Headings, highlights
justify	Both edges	Newspaper columns

CSS

/* Text alignment */
.left-align {
  text-align: left;
}

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

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

.justify {
  text-align: justify;
}

/* Text indent */
p {
  text-indent: 2em;
  /* First line indented 2x font-size */
}

/* Negative indent */
h1 {
  text-indent: -10000px;
  /* Hiding text with indent */
}

Common Patterns

CSS

/* Centered heading */
h1 {
  text-align: center;
  font-size: 2rem;
}

/* Justified paragraph */
p {
  text-align: justify;
  line-height: 1.6;
}

/* Right-aligned date */
.date {
  text-align: right;
  color: #666;
}

/* Centered button group */
.button-group {
  text-align: center;
}

button {
  display: inline-block;
}

Note

Text-align controls inline content alignment. Use left for body text, center for emphasis. Text-indent creates paragraph indents.

Color values: [hex, rgb() & hsl()](/css/hex-rgb-hsl).