vertical-align 속성

vertical-align 속성은
인라인 레벨 요소와 테이블 셀 요소 내부의 수직 정렬을 지정하는 속성입니다.
해당 요소가 부모 요소의 기준선에 상대적으로 어떻게 수직(vertical) 정렬(align)되는지를 설정합니다.

주의하세요!
이 속성은 블록 레벨 요소에 직접적으로 적용되지 않습니다.

이해를 돕기 위한 용어 참고

인라인 레벨(inline-level) 요소

문서 안에서 내용을 새로운 줄로 만들지 않고, 기존 줄 안에 들어가는 요소들입니다. 즉, 문장 속 강조된 글씨나 문장 속에 삽입된 이미지 같은 것들이 예입니다. 스타일적으로 말하자면, 요소의 앞이나 뒤의 요소를 강제로 줄바꿈 시키지 않는 요소들을 말합니다.

인라인 레벨 요소는 CSS의 display 속성의 값을 inline, inline-table, inline-block 등과 같은 인라인에 관련된 값으로 지정해서 만들 수도 있습니다.

테이블 셀(table-cell) 요소

HTML의 <td>와 <th> 요소를 말합니다.
테이블 셀 요소는 CSS의 display 속성의 값을 table-cell로 지정해서 만들 수도 있습니다.

블록 레벨(block-level) 요소

flex나 grid의 아이템 요소가 아니라면, 시각적으로 별도의 블록을 형성하며 요소의 앞이나 뒤의 요소를 줄바꿈 시키는 요소들입니다. 쉽게 말해, 웹페이지에서 한 줄 밑에 새로운 항목으로 시작하는 요소입니다. 문단, 목록, 표 등이 해당합니다.

블록 레벨 요소는 CSS의 display 속성의 값을 block, list-item, table, flex, grid 등과 같은 블록에 관련된 값으로 지정해서 만들 수도 있습니다.

데모 시도해 보기

CSS 데모: vertical-align 데모 버튼을 클릭해서 star의 수직 정렬을 확인해 보세요!

vertical-align 속성은 수직 정렬을 설정하지만 text-align 속성은 가로 정렬을 설정합니다.

형식 구문

CSS 
selector {
    vertical-align: /* value */
}

형식 정의

vertical-align 속성의 형식 정의
초깃값 인라인 레벨 요소: baseline
테이블 셀 요소: inherit
적용대상 인라인 레벨 요소와 테이블 셀 요소
상속 아니오

공식 명세서(https://drafts.csswg.org/css2/#propdef-vertical-align)에서 초깃값은 baseline입니다. 하지만, 주요 브라우저에서는 인라인 레벨 요소와 테이블 셀 요소에서의 초깃값을 다르게 적용하고 있습니다. 주요 브라우에서는 Appendix D. Default style sheet for HTML 4를 참조하고 있습니다.

값

vertical-align의 속성 값은 인라인 레벨 요소와 테이블 셀 요소에서 다른 의미를 갖습니다.

인라인 레벨 요소에서의 값

baseline

초깃값입니다. 해당 요소의 하단을 부모 요소의 baseline을 기준으로 맞춰 정렬합니다. baseline이 없으면 부모 요소의 아래쪽 가장자리를 기준으로 맞춰 정렬합니다. <textarea>와 같은 일부 대체 요소의 baseline은 그 위치가 명세서처럼 작동하지 않고 브라우저마다 다를 수 있습니다.

baseline

baseline이란 글자의 "기준선"이라고도 말하며, 영어의 소문자에서 g,j, q 등과 같이 글자 하단 밑의 아래까지 표시되는 글자와 그렇지 않는 경계의 "기준이 되는 선"을 의미합니다. 한글을 비롯하여 동남아의 글자에는 baseline 밑의 아래까지 표시되는 글자가 없습니다.

middle

해당 요소는 부모 요소의 x-height의 중간점(0.5ex)을 기준으로 수직 가운데 정렬을 합니다.

x-height

x-height는 소문자 x의 높이를 의미합니다. x-height = 1ex

sub

해당 요소는 부모 요소의 아래 첨자 기준으로 정렬을 합니다.
(이 값은 요소 텍스트의 글꼴 크기에 영향을 미치지 않습니다.)

super

해당 요소는 부모 요소의 위 첨자 기준으로 정렬을 합니다.
(이 값은 요소 텍스트의 글꼴 크기에 영향을 미치지 않습니다.)

text-top

해당 요소의 상단을 부모 요소의 텍스트 상단에 맞춰 정렬합니다.

text-bottom

해당 요소의 하단을 부모 요소의 텍스트 하단에 맞춰 정렬합니다.

<length>

길이 단위입니다. 부모 요소의 baseline를 기준으로 해당 요소를 이 길이만큼 올리거나(양수 값) 내립니다(음수 값).
0cm 값은 baseline과 동일함을 의미합니다.

<percentage>

퍼센트 단위입니다. 부모 요소의 baseline를 기준으로 해당 요소를 이 %만큼 올리거나(양수 값) 내립니다(음수 값).
line-height 속성의 백분율입니다. 0% 값은 baseline과 동일함을 의미합니다.

top

해당 요소의 상단을 부모 요소의 위쪽 가장자리에 맞춰 정렬합니다.

부모 요소의 위쪽 가장자리는 부모요소에 배경색을 넣었을 때 보이는 맨 위쪽 가장자리를 의미합니다.

bottom

해당 요소의 하단을 부모 요소의 아래쪽 가장자리에 맞춰 정렬합니다.

부모 요소의 아래쪽 가장자리는 부모요소에 배경색을 넣었을 때 보이는 맨 아래쪽 가장자리를 의미합니다.

테이블 셀 요소에서의 값

주의하세요!
테이블 셀 요소의 초깃값은 baseline이 아닙니다.
테이블 셀 요소인 <td>와 <th> 요소의 vertical-align 속성의 초깃값은 inherit(부모의 값을 상속 받음을 뜻함)입니다.
<thead>와 <tbody>, <tfoot> 요소의 vertical-align 속성의 초깃값이 middle이고 이 값을 상속받아 middle을 구현합니다.

baseline,
sub,
super,
text-top,
text-bottom,
<length>,
<percentage>

셀의 baseline을 baseline으로 정렬된 행(row)의 모든 셀의 baseline에 맞춥니다.

top

해당 요소의 상단을 셀의 padding-top 아래쪽 가장자리에 맞춥니다.

middle

해당 요소는 셀의 padding box 내의 수직 가운데 정렬을 합니다.

bottom

해당 요소의 하단을 셀의 padding-bottom 위쪽 가장자리에 맞춥니다.

다양한 예제

vertical-align 속성의 구현을 제대로 이해하려면 vertical-align 속성의 값에 대한 이해가 필수적입니다. vertical-align 속성의 값들을 이용한 다양한 예제에 대해 살펴보겠습니다.

인라인 레벨 요소에서의 값

편의상 HTML 코드는 공통으로 사용하겠습니다.

HTML 편의상 HTML 코드는 공통으로 사용하겠습니다. 
<p style="font-size: 3em; background-color: silver;">
    <img class="icon" src="star.svg" alt="별 모양의 아이콘"> Eng 한글
</p>

vertical-align: baseline;

초깃값입니다. 해당 요소의 하단을 부모 요소의 baseline을 기준으로 맞춰 정렬합니다.

CSS 
.icon {
    vertical-align: baseline;
}
실제 적용 모습

vertical-align: middle;

CSS 
.icon {
    vertical-align: middle;
}
실제 적용 모습

해당 요소는 부모 요소의 x-height의 중간점(0.5ex)을 기준으로 수직 가운데 정렬을 합니다. x-height는 소문자 x의 높이를 의미합니다. x-height = 1ex

잠시만!
middle이라는 말과는 다르게 글자의 위아래 수직으로 가운데 정렬하지 않는 것처럼 보입니다. 물론, 이는 한글을 기준으로 그렇다는 것이고 영문으로 보면 아이콘의 수직 배치가 가운데 정렬하는 것처럼 보입니다. 이 middle 값은 영문 기준의 값이라는걸 기억하세요!

vertical-align: sub;

해당 요소는 부모 요소의 아래 첨자 기준으로 정렬을 합니다. (이 값은 요소 텍스트의 글꼴 크기에 영향을 미치지 않습니다.)
HTML에서는 아래 첨자를 나타내는 <sub> 태그가 이 위치에서 표시됩니다.

CSS 
.icon {
    vertical-align: sub;
}
실제 적용 모습

vertical-align: super;

해당 요소는 부모 요소의 위 첨자 기준으로 정렬을 합니다. (이 값은 요소 텍스트의 글꼴 크기에 영향을 미치지 않습니다.)
HTML에서는 위 첨자를 나타내는 <sup> 태그가 이 위치에서 표시됩니다.

CSS 
.icon {
    vertical-align: super;
}
실제 적용 모습

vertical-align: text-top;

해당 요소의 상단을 부모 요소의 텍스트 상단에 맞춰 정렬합니다.

CSS 
.icon {
    vertical-align: text-top;
}
실제 적용 모습

잠시만!
실제 적용된 모습을 보면, 부모 요소의 텍스트 상단과 정확히 일치하지 않는 것을 볼 수 있습니다. 이는 해당 글꼴을 디자인할 때 디자인적인 간격이나 여백 등의 폰트의 특성 때문입니다.

vertical-align: text-bottom;

해당 요소의 하단을 부모 요소의 텍스트 하단에 맞춰 정렬합니다.

CSS 
.icon {
    vertical-align: text-bottom;
}
실제 적용 모습

잠시만!
실제 적용된 모습을 보면, 부모 요소의 텍스트 하단과 정확히 일치하지 않는 것을 볼 수 있습니다. 이는 해당 글꼴을 디자인할 때 디자인적인 간격이나 여백 등의 폰트의 특성 때문입니다. 또한 한글의 경우 baseline이 없기 때문에 더 다르게 보일 수 있습니다.

vertical-align: <length>

길이 단위입니다. 부모 요소의 baseline를 기준으로 해당 요소를 이 길이만큼 올리거나(양수 값) 내립니다(음수 값). 0cm 값은 baseline과 동일함을 의미합니다.

vertical-align:0;

CSS 
.icon {
    vertical-align: 0; /* baseline과 동일함 */
}
실제 적용 모습

vertical-align: 10px;

CSS 
.icon {
    vertical-align: 10px; /* 양수는 이 길이만큼 올립니다. */
}
실제 적용 모습

vertical-align: -10px;

CSS 
.icon {
    vertical-align: -10px; /* 음수는 이 길이만큼 내립니다. */
}
실제 적용 모습

vertical-align: <percentage>

퍼센트 단위입니다. 부모 요소의 baseline를 기준으로 해당 요소를 이 %만큼 올리거나(양수 값) 내립니다(음수 값). line-height 속성의 백분율입니다. 0% 값은 baseline과 동일함을 의미합니다.

vertical-align: 10%;

CSS 
.icon {
    vertical-align: 10%; /* 양수는 이 %만큼 올립니다. */
}
실제 적용 모습

vertical-align: -10%;

CSS 
.icon {
    vertical-align: -10%; /* 음수는 이 %만큼 내립니다. */
}
실제 적용 모습

vertical-align: top;

해당 요소의 상단을 부모 요소의 위쪽 가장자리에 맞춰 정렬합니다.
부모 요소의 위쪽 가장자리는 부모요소에 배경색을 넣었을 때 보이는 맨 위쪽 가장자리를 의미합니다.

CSS 
.icon {
    vertical-align: top;
}
실제 적용 모습

vertical-align: bottom;

해당 요소의 하단을 부모 요소의 아래쪽 가장자리에 맞춰 정렬합니다.
부모 요소의 아래쪽 가장자리는 부모요소에 배경색을 넣었을 때 보이는 맨 아래쪽 가장자리를 의미합니다.

CSS 
.icon {
    vertical-align: bottom;
}
실제 적용 모습

테이블 셀 요소에서의 값

테이블 셀 요소의 초깃값은 baseline이 아닙니다.

테이블 셀 요소인 <td>와 <th> 요소의 vertical-align 속성의 초깃값은 inherit(부모의 값을 상속 받음을 뜻함)입니다.
<tr>도 초깃값이 inherit입니다.

<thead>와 <tbody>, <tfoot> 요소의 vertical-align 속성의 초깃값이 middle이고,
이 값을 상속받아 middle을 구현합니다.

다음은 테이블 셀 요소에서의 초깃값을 나타내는 예제입니다.

CSS 
table {
    width: 100%;
}
table, tr, th, td {
    border: 1px solid;
}
th, td {
    padding: 20px;
}
.cell {
    background-color: silver;
}
HTML 
<table>
    <tbody> <!-- vertical 속성의 초깃값: middle -->
          <tr> <!-- vertical 속성의 초깃값: inherit -->
            <td>td<br>td<br>td</td> <!-- vertical 속성의 초깃값: inherit -->
            <th class="cell">td</th> <!-- vertical 속성의 초깃값: inherit -->
            <td>td<br>td<br>td</td> <!-- vertical 속성의 초깃값: inherit -->
        </tr>  
    </tbody>
</table>
실제 적용 모습

실제 적용된 모습을 보면 배경색을 silver로 지정한 셀(.cell)의 vertical-align이 middle로 구현되어 있는 것을 볼 수 있습니다.

테이블 셀 요소에서 vertical-align을 지정하지 않았을 경우 초깃값이 인라인 레벨 요소의 초깃값인 baseline과 다르게 표시한다는 것에 주의하세요.

브라우저 호환성

vertical-align 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
vertical-align 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

vertical-align 속성의 명세서 사양
명세서 사양
vertical-align Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#propdef-vertical-align

참고문헌

같이 보기