[css3] vertical-align - 셀 안에서 수직 정렬

1. 개념

vertical-align - 셀 안에서 수직 정렬

vertical-align 표에서 내용을 입력했을 때 width가 지정된 상태에서 콘텐츠 내용이 길어질 때 셀 안에 있는 내용에 따라 너비를 변하게 할지 , 고정시킬 것인지를 정해주는 속성

속성	설명
baseline	셀의 기준선에 내용에 해당하는 기준선을 맞춤
top	셀의 위쪽 가장자리에 내용 윗부분을 맞춤
middle	셀의 중앙에 내용을 맞춤
bottom	셀의 아래쪽 가장자리에 내용 아랫부분을 맞춤

2. 태그

vertical-align

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > td { border : 1px solid #000 ; width : 200px ; height : 200px ; } < /style > < /head > < body > < table > < tr > 1 < td > 수직 배치 < /td > 2 < td style =' vertical-align : top ' > top 위치에 배치 < /td > 3 < td style =' vertical-align : middle ' > middle 위치에 배치 < /td > 4 < td style =' vertical-align : bottom ' > bottom 위치에 배치 < /td > < tr > < /table > < /body > < /html >

결과 화면

vertical-align 사용 예제

코드 설명

1

<

td

> .... <

/td

>

1번은 vertical-align에 대한 속성을 쓰지 않았습니다.
그러면 기본값인 baseline을 설정하게 되어서 셀의 기준선에 내용의 기준선을 맞춰서 표현하게 됩니다.
위에서 보면 수직 배치라는 내용을 셀의 기준선으로 표시할 때는 위와 같은 표현으로 배치가 되는 것을 확인하실 수 있습니다.

2

vertical-align : top

vertical-align 값을 top으로 설정했을 경우에는 2번에서 보는 것처럼 결과가 나타나게 됩니다.
td의 높이를 200px로 설정하고 보았을 때 위쪽 상단의 가장자리에 위치하는 것을 확인하실 수 있습니다.
텍스트의 수평 정렬은 text-align으로 설정이 가능한데 특별한 설정이 없을 경우에는 기본값이 left에 적용이 됩니다.
그래서 top 위치에 배치라는 내용은 위쪽에서 왼쪽으로 배치되는 것을 확인하실 수 있습니다.

3

vertical-align : middle

middle의 속성은 중앙에 위치하도록 합니다.
중앙에 위치한다는 것은 수직에 대한 중앙, 가운데를 의미하는 것입니다.
만약 수평으로 중앙에 위치하게 하고자 할 경우에는 text-align 속성을 center로 놓으시면 됩니다.
높이가 200px인 td에서 middle은 100px 정도의 위치에 내용을 위치하게 합니다.

4

vertical-align : bottom

bottom 속성은 4번에서 보는 것처럼 셀의 맨 아래에 위치하게 합니다.
셀의 맨 아래 부분이 내용의 맨 아래 부분에 맞춰서 내용을 표시하고 있음을 알 수 있습니다.