2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Text_Alignment.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-text-alignment	CSS Text Alignment	Frontend	draft	conceptual		text-align text alignment text-align-last vertical-align text direction		B	0.88	2026-06-23	2026-06-23			css web frontend w3schools text alignment	https://www.w3schools.com/css/css_text_align.asp

CSS Text Alignment

🎯 한 줄 통찰 (One-line insight)

CSS controls horizontal text alignment with text-align and text-align-last, vertical positioning with vertical-align, and text directionality with direction and unicode-bidi. [S1]

🧠 핵심 개념 (Core concepts)

• Five related properties — text-align, text-align-last, vertical-align, direction, and unicode-bidi. [S1]
• text-align values — left (aligns text to the left), right (aligns text to the right), center (centers the text), and justify (stretches the lines so that each line has equal width). [S1]
• text-align-last — specifies alignment for the final line; values: auto, left, right, center, justify, start, and end. [S1]
• vertical-align — values include baseline, length/%, sub, super, top, text-top, middle, bottom, and text-bottom. [S1]
• Text direction — direction with unicode-bidi controls right-to-left text. [S1]

🧩 추출된 패턴 (Extracted patterns)

• Heading alignment pattern — assign different text-align values across h1/h2/h3 for varied alignment. [S1]
• Justify-block pattern — text-align: justify; stretches each line to equal width. [S1]
• Inline-image vertical alignment pattern — apply vertical-align per image class to position images relative to text. [S1]
• RTL pattern — combine direction: rtl; with unicode-bidi: bidi-override; for right-to-left text. [S1]

📖 세부 내용 (Details)

The page introduces five CSS properties for text alignment and direction: text-align, text-align-last, vertical-align, direction, and unicode-bidi. [S1]

Text Alignment — the text-align property accepts: "left - Aligns the text to the left," "right - Aligns the text to the right," "center - Centers the text," and "justify - Stretches the lines so that each line has equal width." [S1]

Example 1: [S1]

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Example 2: [S1]

div {
  text-align: justify;
}

Text Align Last — the text-align-last property specifies alignment for the final line, with values: auto, left, right, center, justify, start, and end. [S1]

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Vertical Alignment — the vertical-align property includes values like baseline, length/%, sub, super, top, text-top, middle, bottom, and text-bottom. [S1]

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}

Text Direction — [S1]

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

A summary table on the page lists all five properties with their descriptions. [S1]

🛠️ 적용 사례 (Applied in summary)

The page's own examples are the applied cases: per-heading horizontal alignment, justified blocks, last-line alignment on paragraphs, per-image vertical alignment, and an RTL paragraph. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Horizontal alignment pattern (language: CSS):

selector {
  text-align: left | right | center | justify;
}

Concrete example:

h1 {
  text-align: center;
}

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

• text-align vs text-align-last — text-align aligns all lines of a block, while text-align-last controls only the alignment of the final line. [S1]
• text-align vs vertical-align — text-align controls horizontal alignment of text; vertical-align controls the vertical positioning of inline content (e.g., images) relative to the line. [S1]
• justify value choice — choose justify when each line should stretch to equal width; choose left/right/center for simple alignment without stretching. [S1]

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

• 상태: draft
• 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
• 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
• 신뢰 점수: 0.88
• 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

• 상위/루트: CSS Tutorial
• 관련 개념: CSS Text Color, CSS Text Decoration, CSS Text Spacing
• 참조 맥락: Referenced when positioning text horizontally/vertically or supporting right-to-left languages.

📚 출처 (Sources)

• [S1] W3Schools — CSS Text Alignment — https://www.w3schools.com/css/css_text_align.asp

📝 변경 이력 (Change history)

• 2026-06-23: Initial draft synthesized from the W3Schools "CSS Text Alignment" page (Astra wiki-curation, P-Reinforce v3.1 format).