Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

5.6 KiB

Raw Blame History

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

title

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).

5.6 KiB Raw Blame History