CSS 표스타일(vertical-align속성)

- 이미지나 폼 요소를 위,가운데,아래 등으로 세로 정렬시켜 줍니다.

- 쓸 수 있는 값들 : top(위쪽 정렬), middle(중앙 정렬), bottom(아래쪽 정렬)

- img, input, select, 테이블의 th, td등에 사용합니다.

 

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

 

 

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

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