[CSS] text-align

text-align 속성의 주요 값

값	설명
left	텍스트를 왼쪽 정렬합니다. (기본값, 특히 왼쪽에서 읽는 언어에서)
right	텍스트를 오른쪽 정렬합니다.
center	텍스트를 가운데 정렬합니다.
justify	양쪽 정렬로, 텍스트 양쪽 끝을 맞추기 위해 공백을 자동 조정합니다.
start	문장의 시작 방향에 따라 정렬합니다. (LTR 언어는 왼쪽, RTL 언어는 오른쪽)
end	문장의 끝 방향에 따라 정렬합니다. (LTR 언어는 오른쪽, RTL 언어는 왼쪽)

✅ 1. 블록 요소 자식 정렬 안 됨

❌ 잘못된 코드

 

<div style="text-align: center;">   <div>나는 가운데 정렬되지 않음</div> </div>

 

• 이유: 안쪽 <div>는 블록 요소라 텍스트 정렬 영향 안 받음
  
  

✅ 수정된 코드

 

<div style="text-align: center;">   <div style="display: inline-block;">나는 가운데 정렬됨</div> </div>

 

• display: inline-block으로 바꾸면 text-align의 영향을 받아 가운데 정렬됨
  
  

---

✅ 2. Flexbox 쓰는 경우

❌ 잘못된 코드

 

<div style="display: flex; text-align: center;">   <div>나는 가운데 안 감</div> </div>

 

• 이유: Flexbox에서는 text-align이 작동하지 않음
  
  

✅ 수정된 코드

 

<div style="display: flex; justify-content: center;">   <div>이제 가운데 감</div> </div>

 

• Flexbox에서는 justify-content로 수평 정렬을 해야 함
  
  

---

✅ 3. 이미지 정렬

❌ 잘못된 코드

 

<img src="image.jpg" style="text-align: center;">

 

• 이유: img는 인라인 요소지만 text-align은 부모에게 적용해야 함
  
  

✅ 수정된 코드

 

<div style="text-align: center;">   <img src="image.jpg"> </div>

 

• text-align을 부모 블록 요소에 적용해야 이미지가 가운데 정렬됨
  
  

---

✅ 4. 입력 필드 텍스트 정렬

❌ 잘못된 코드

 

<input type="text" value="이 텍스트는 가운데 안 감">

 

• 이유: text-align이 적용되지 않아서 기본 왼쪽 정렬
  
  

✅ 수정된 코드

 

<input type="text" value="가운데 감" style="text-align: center;">

 

• input에 직접 text-align: center를 주면 가운데 정렬됨
  
  

---

✅ 5. 자식 요소가 없는 경우

❌ 잘못된 코드

 

<div style="text-align: right;"></div>

 

• 이유: 안에 텍스트가 없으므로 아무 효과 없음
  
  

✅ 수정된 코드

 

<div style="text-align: right;">텍스트가 있어야 오른쪽 정렬됨</div>

 

• 텍스트가 있어야 text-align이 보이는 효과가 생김