div 세로로 배열하기

세월이 흘러 table은 낡은 것이 되고 요즘엔 전부 div로 화면을 구성하더라. ㅠ.ㅠ

table의 td는 style의 vertical-align을 지정하여, 텍스트와 이미지를 배치할 수 있지만, div 태그안에서는 vertical-align이 적용되지 않습니다. div에 vertical-align을 지정하려면 아래와 같이 합니다.

 x:left, y:bottom 정렬

 

 

x:center, y:bottom 정렬

 

x:center, y:center 정렬

display: table; 은 table 태그 이외의 것을 table처럼 화면에 표시하도록 합니다.
그리고 display: table-cell; 이 적용된 태그는 테이블의 셀과 동일하게 취급하기 때문에
td와 마찬가지로 vertical-align을 사용할 수 있습니다.

 

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다