본문 바로가기
css

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

by 지구별에 2014. 6. 5.
반응형

 

 

[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 - 부모 요소 중앙에 위치 

 

 

 

 

설명

 

 

● 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 중앙 정렬하기

 

반응형

댓글3

  • yong8 2016.02.20 00:13

    이해가 쏙쏙 되게 너무 정리를 잘 해주셨네요~~
    잘 보고 갑니다!!
    답글

  • norok0903 2017.08.01 20:01

    덕분에 많은거 배웠습니다. 많이 감사합니다.
    답글

  • lheojyl 2022.03.18 14:56

    'div에 line-heigh속성 적용후 vertical-align적용된다'는 문장 하나가 절 살렸습니다....ㅜㅜㅠㅋㅋㅋㅋ
    답글