text-align

text-align 유틸리티는 요소 안의 텍스트가 왼쪽, 가운데, 오른쪽 중 어디에 정렬될지를 결정해 줘요.

출처: 문서

본문

텍스트 왼쪽 정렬하기 (Left aligning text)

text-left 유틸리티를 사용하면 요소의 텍스트를 왼쪽으로 정렬할 수 있어요:

<p class="text-left">So I started to walk into the water...</p>

텍스트 오른쪽 정렬하기 (Right aligning text)

text-right 유틸리티를 사용하면 요소의 텍스트를 오른쪽으로 정렬할 수 있어요:

<p class="text-right">So I started to walk into the water...</p>

텍스트 가운데 정렬하기 (Centering text)

text-center 유틸리티를 사용하면 요소의 텍스트를 가운데로 정렬할 수 있어요:

<p class="text-center">So I started to walk into the water...</p>

텍스트 양쪽 정렬하기 (Justifying text)

text-justify 유틸리티를 사용하면 요소의 텍스트를 양쪽 끝으로 맞춰 정렬(justify)할 수 있어요:

<p class="text-justify">So I started to walk into the water...</p>

논리 속성 사용하기 (Using logical properties)

text-start와 text-end 유틸리티는 텍스트 방향에 따라 왼쪽 또는 오른쪽에 매핑되는 논리 속성(logical properties)을 사용해요:

<div dir="rtl" lang="ar">
  <p class="text-end">فبدأت بالسير نحو الماء...</p>
</div>

반응형 디자인 (Responsive design)

text-align 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<p class="text-left md:text-center ...">
  Lorem ipsum dolor sit amet...
</p>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.