[CSS] 수직 정렬 vertical-align 사용 방법, 속성

 

수직 정렬 vertical-align 

 문구를 수직으로 정렬하기 위해서는 vertical-align 속성을 설정해주면 된다.

설정할 수 있는 속성은 다양하게 있는데, 아래 위 중간 등 아래와 같이 있다.

 

/* keyword values */
vertical-align: baseline;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;

/* <percentage> values */
vertical-align: 20%;

 

 

가장 흔히 쓰이는 속성은 아래 3개

• vertical-align: baseline; // default
• vertical-align: top;  // 위 정렬
• vertical-align: middle; // 중간 정렬
• vertical-align: bottom; // 아래 정렬

 

실제로 각각 스타일을 적용하면 아래와 같이 보인다.

 

baseline

top

middle

bottom

테스트 문구 아무말 대잔치 뿌잉 테스트 문구 아무말 대잔치 뿌잉 테스트 문구 아무말 대잔치 뿌잉 테스트 문구 아무말 대잔치 뿌잉

 

 

속성 sub, super, text-top/bottom은 업무에서는 써본 적이 없지만, 아래와 같은 특성을 가진다.

즉, 기본 문자 줄에 아래나 위에 위치하여 첨언 처럼 사용할 수 있다.

 

--- sub --- super --- text-top --- text-bottom ---

 

 

예를 들어보면, 아래와 같다.

 

01 @@ 보험은 모든걸 보장합니다. (sub) 암은 제외, 교통사고 제외

 

02 우리 결혼하자 (super) 다음 생에

 

03 동의하십니까? (text-top) 광고 포함

 

 

끝! 끝 끝

 

 

---

[ 공식 문서 ] developer.mozilla.org/ko/docs