표 스타일 CSS - vertical-align

표 스타일 CSS - vertical-align

• vertical-align 속성은 수직 정렬 방법을 지정하는 속성이기 때문에 inline이나 inline-block으로 배치한 요소의 세로 정렬 방법으로 지정합니다.
• 기본형 : vertical-align : baseline / top / bottom / middle / sub / super / text-top / text-bottom / < 길이 값 > / < 백분율 값 >

속성 값	설명
baseline	인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춥니다.
sub	인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춥니다.
super	인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춥니다.
top	인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춥니다.
middle	인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춥니다.
bottom	인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춥니다.
text-top	인라인 요소의 윗부분을 부모 요소의 글꼴의 윗부분에 맞춥니다.
text-bottom	인라인 요소의 아랫부분을 부모 요소의 글꼴의 아랫부분에 맞춥니다.
< 길이 값 >	기준선을 0px로 생각하고 길이 값이 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮깁니다.
< 백분율 값 >	기준선을 0%로 생각하고 line-height의 몇 %인지에 따라 양수면 위로, 음수면 아래로 옮깁니다.

• 표의 셀에서 사용할 경우 기준선이나 위, 아래, 가운데 등으로 정렬할 수 있습니다.

 

속성 값	설명
baseline	셀의 기준선에 내용의 기준선을 맞춥니다. (기본 값)
top	패딩의 위쪽 가장자리에 내용의 윗부분을 맞춥니다.
middle	패딩 박스의 중앙에 내용을 맞춥니다.
bottom	패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춥니다.

각각 vertical-align : top / bottom / middle를 적용한 경우

 

<style>
    .exam1 {width: 500px; height: 300px; border: 2px solid pink; padding: 15px;}
    .exam1 td {text-align: center; height: 200px; border: 2px solid powderblue; padding: 10px;}
    .exam1 .ex1 {vertical-align: top}
    .exam1 .ex2 {vertical-align: bottom}
    .exam1 .ex3 {vertical-align: middle}
</style>