[html/css] vertical-align 속성 자세히 알기(수직 정렬)

 

 

[html/css] vertical-align 속성 자세히 알기(인라인 요소의 수직 정렬)

 

 

vertical-align 속성, 그저 수직 정렬할 때 쓰이는 걸로만 알고 있었는데 정리하다 보니 너무 너무 어렵네요

 

필요하신 부분만 골라서 보시면 되겠습니다~

 

css에서는 인라인 요소와 인라인 블록 요소를 수직 정렬할 때 vertical-align 속성을 씁니다.

 

 

vertical-align 속성은 다음과 같은 특징이 있습니다.

 

『 

 

1. inline이나 inline-block 요소에만 적용 됨

   

   따라서 block 요소인 <div>는 이 속성을 썼을 때 작동되지 않음.

    
      2. 요소 자체만을 정렬하고,  내용에는 영향을 미치지 않음. (table cell에 적용할 때는 제외)

 

3. table cell에 적용할 때는 내용에 영향을 미침

 

4. vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬함.

   그래서 같은 줄에서 인라인 요소의 크기에 따라 높낮이가 달라질 수 있고,

   그 줄에 있는 line-height 설정에 따라서도 달라질 수 있음.

                                                                                                                                      』

인라인 요소에 적용되는 vertical-align 속성 값과 table 칸에서 적용되는 속성 값이 달라서 따로 정리했습니다.

 

display 속성 (inline, block, none, inline-block 차이),

 

인라인 요소 속성값

 

baseline ｜sub ｜ super ｜text-top ｜ text-bottom ｜ middle ｜ top ｜ bottom ｜ 길이값 ｜ %

 

 

대부분 부모 요소에 상대적으로 정렬합니다.

● baseline  - 기본값으로, 부모 요소의 기준 선(baseline)에 맞춤. 

*baseline이란? 위 그림처럼 꼬리 부분을 뺀 기준 선

*기준선이 없는 요소는 margin 끝을 기준선으로 사용함 

 

● sub -  부모의 아래첨자 기준선에 맞춤

 

 

● super - 부모의 위첨자 기준선에 맞춤

 

 

 

● text-top - 요소의 맨 위를 부모 font의 맨 위에 맞춤   

 

: 오른쪽이 vertical-align: text-top을 적용한 것 (빨간 줄)

왼쪽 글꼴 중 가장 큰 철자 맨 위에 맞추어 정렬되었습니다.

약간의 갭이 있는 것은 여기에는 없는 철자 중 더 큰 것이 있다는 의미.

 

 

● text-bottom - 요소의 맨 아래를 부모 font의 맨 아래에 맞춤

: 오른쪽이 vertical-align: text-bottom을 적용한 것 (빨간 줄)

왼쪽 글꼴 중 가장 큰 철자 맨 아래 부분에 맞추어 정렬 함.

 

 

● middle - 부모 요소 중앙에 위치 

 

 

설명

위 이미지는 산토끼송 바로 뒤에 <div>를 만들고 display: inline-block을 적용한 것입니다. 

산토끼쏭 뒤에 inline 박스는 수직으로 중앙 정렬된 반면 , 그 안에 있는 내용에는 전혀 영향을 미치지 않습니다. 

 

 

*주의 : middle은 인라인요소를 줄에서 가장 큰 요소의 중간에 정렬하지 않고 
가장 작은 소문자 x 높이의 중앙에 정렬합니다. 그래서 이 값을 text-middle이라 불러야 더 적당하다고 말도 있네요~

 

 

 

● top  - 요소의 맨 위를 줄에서 가장 큰 요소의 맨 위에 맞춤.  

 

 

 

● bottom   - 요소의 맨 아래를 줄에서 가장 낮은 요소에 맞춤. 

 

 

●길이값(px, cm등) -  0px는 baseline과 같은 값

  *%와 길이는 음수값도 가능 

 

 

 

●%  백분율  -   line-height(줄간격)의 백분율, 0%는 baseline과 같은 값 

 

 

 

table cell 속성값

 

top ｜ middle ｜ bottom  

top - 테이블 칸에서  상단 padding 을 가로 줄의 맨 위에  맞춤.

 

middle - 테이블 칸에서  padding box 을  중앙에 위치
 

bottom - 테이블 칸에서 하단 padding 가로 줄에서 맨 아래에 맞춤

 
*음수값 허용

 

 

verticalalign table.htm

 

 

참, 맨 위에서 div 같은 블록 요소에는 vertical-align 속성 적용이 안 된다고 했는데요

 

div에 line-height 속성을 적용하고 나서 vertical-align:middle을 쓰면 수직 중앙 정렬됩니다.

 

단 한 줄 짜리 text에서만 이 방법이 적용됩니다.

 

수직 중앙 정렬 방법은 아래 링크 참조해주세요~

 

 

 

 

[html/css] 수직으로 가운데 정렬 방법 (다섯 가지)

 

line-height 속성 배우기

 

table 중앙 정렬하기

 

div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)

 

div 2개 정렬하기 (오른쪽, 왼쪽, 중앙 정렬)

 

table 중앙 정렬하기