REFERENCEcss

css Documentation

📖 INDEX

# css-syntax

# including-css-in-html

# universal-selectors

# css-attribute-selectors

# descendant-selectors

# background-position

# top-right-bottom-left

# grid-template-columns

# grid-template-rows

# grid-gap

# grid-template-areas

# transition-duration

# transition-timing-function

# animation-timing-function

# animation-delay

# media-queries

# ref-screen-dimensions

# orientation

# resolution

# ref-device-characteristics

LOADING ENGINE...

Text-align

AI & DATA SCIENCE // text-align

The text-align property sets the horizontal alignment of inline content, like text, within its containing block element.

Syntax

text-align: left | right | center | justify;

Deep Dive Course

left and right align text against the corresponding edge of its container, center centers each line horizontally within the available width, and justify stretches each line, except typically the last, so that both the left and right edges align evenly, achieved by adjusting the spacing between words. text-align only affects inline-level content, like text and inline elements, within the block it's applied to — it has no effect on positioning the block-level element itself within its own parent, which is instead controlled by properties like margin: auto or flexbox/grid alignment properties.

1Understanding Text-align

💡

text-align only centers or aligns inline content, like the text inside a box — it does NOT center the box itself within its own parent container, a common point of confusion; use margin: auto or a flexbox/grid alignment property to actually center the block element itself.

editor.html

.title {
  text-align: center;
}

localhost:3000

2Practical Example

Here is a real-world application of Text-align showing how it is used in production CSS code.

editor.html

.box {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

<div class="box">Text</div>

localhost:3000

3Best Practices

Follow these guidelines when working with Text-align:

1. Use text-align specifically to align the inline content, like text, within a block, not to position the block element itself within its parent

2. Use margin: auto, for a block with a defined width, or flexbox/grid alignment properties to center the block element itself, rather than expecting text-align to do that job

3. Use justify sparingly for body text, since evenly stretching word spacing to fill each line can occasionally create noticeably uneven, distracting gaps, especially in narrow columns

⚠️

Tip: text-align only centers or aligns inline content, like the text inside a box — it does NOT center the box itself within its own parent container, a common point of confusion; use margin: auto or a flexbox/grid alignment property to actually center the block element itself.

editor.html

.title {
  text-align: center;
}

localhost:3000

Examples

Example 01Basic Usage

.title {
  text-align: center;
}

Example 02Advanced Example

.box {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

<div class="box">Text</div>

Best Practices

Use text-align specifically to align the inline content, like text, within a block, not to position the block element itself within its parent
Use margin: auto, for a block with a defined width, or flexbox/grid alignment properties to center the block element itself, rather than expecting text-align to do that job
Use justify sparingly for body text, since evenly stretching word spacing to fill each line can occasionally create noticeably uneven, distracting gaps, especially in narrow columns

Interview Question

Why doesn't text-align: center on a block element also center that block element itself within its own parent container?▼

Hint: Think about exactly what text-align is designed to control — the positioning of a block-level box itself, or something else entirely inside it.

text-align is specifically designed to control the horizontal alignment of inline-level content, text and inline elements, within the available width of the block element it's applied to, it has no defined effect at all on the positioning or alignment of that block-level element's own box relative to its parent container, since those are simply two entirely different, unrelated layout concerns that CSS deliberately handles with separate, dedicated mechanisms. Centering a block-level element itself within its parent instead requires either giving it an explicit width paired with margin: left and right set to auto, letting the browser automatically and equally distribute any remaining horizontal space on both sides, or using a layout model like flexbox or grid with their own dedicated alignment properties, like justify-content: center. This separation exists because aligning content within a box and positioning the box itself are genuinely distinct layout questions, and conflating them into a single property would make each individual concern less flexible and harder to control independently of the other.

Exercises

MediumPractice using Text-align in a real scenario.

View Solution

.title {
  text-align: center;
}

Frequently Asked Questions

Why doesn't text-align: center on a block element also center that block element itself within its own parent container?▼

Related Functions

Line-heightRefDimensionsMargin