수직 정렬

수직 정렬 (Vertical Align)

인라인(inline)이나 인라인 블록(inline-block) 요소를 부모 요소나 줄 안에서 수직으로 어떻게 정렬할지를 정해주는 유틸리티예요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

align-baseline vertical-align: baseline;

align-top vertical-align: top;

align-middle vertical-align: middle;

align-bottom vertical-align: bottom;

align-text-top vertical-align: text-top;

align-text-bottom vertical-align: text-bottom;

align-sub vertical-align: sub;

align-super vertical-align: super;

align-(<custom-property>) vertical-align: var(<custom-property>);

align-[<value>] vertical-align: <value>;

예시 (Examples)

베이스라인에 정렬하기 (Aligning to baseline)

align-baseline 유틸리티를 사용하면 요소의 베이스라인을 부모의 베이스라인에 맞출 수 있어요.

<span class="inline-block align-baseline">The quick brown fox...</span>

위쪽에 정렬하기 (Aligning to top)

align-top 유틸리티를 사용하면 요소와 그 하위 요소의 위쪽을 전체 줄(line)의 위쪽에 맞출 수 있어요.

<span class="inline-block align-top">The quick brown fox...</span>

가운데에 정렬하기 (Aligning to middle)

align-middle 유틸리티를 사용하면 요소의 가운데를 부모의 베이스라인에서 x-height 절반만큼 더한 위치에 맞출 수 있어요.

<span class="inline-block align-middle">The quick brown fox...</span>

아래쪽에 정렬하기 (Aligning to bottom)

align-bottom 유틸리티를 사용하면 요소와 그 하위 요소의 아래쪽을 전체 줄(line)의 아래쪽에 맞출 수 있어요.

<span class="inline-block align-bottom">The quick brown fox...</span>

부모의 글자 위쪽에 정렬하기 (Aligning to parent top)

align-text-top 유틸리티를 사용하면 요소의 위쪽을 부모 요소 글꼴(font)의 위쪽에 맞출 수 있어요.

<span class="inline-block align-text-top">The quick brown fox...</span>

부모의 글자 아래쪽에 정렬하기 (Aligning to parent bottom)

align-text-bottom 유틸리티를 사용하면 요소의 아래쪽을 부모 요소 글꼴(font)의 아래쪽에 맞출 수 있어요.

<span class="inline-block align-text-bottom">The quick brown fox...</span>

커스텀 값 사용하기 (Using a custom value)

align-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 수직 정렬을 설정할 수 있어요.

<span class="align-[4px] ...">
  <!-- ... -->
</span>

CSS 변수를 쓸 때는 align-(<custom-property>) 문법을 사용할 수도 있어요.

<span class="align-(--my-alignment) ...">
  <!-- ... -->
</span>

이것은 align-[var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

vertical-align 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<span class="align-middle md:align-top ...">
  <!-- ... -->
</span>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.