div태그로 홈페이지 만들기 - 세로 정렬 > html

div 태그가 table 보다 불편한 점이라면

세로 정렬이 안된다는 점이다.

아직까지 세로 가운데 정렬을 어떻게 하는지 모르겠는데

나름대로의 편법을 소개할까 한다

먼저 div 태그의 height style을 설정하지 않는다

그러면 내용의 크기와 동일하게 div영역 높이가 설정된다

그런다음 내부 여백인 padding 을 정의 하고 위아래에 여백을 적당히 준다

그렇게 되면 div 내용이 div 내에서 가운데 정렬이 된다.

위아래 여백을 적당한 숫자로 같게하면 글자크기와 위아래 여백으로 height 높이를 적당히 맞출수 있다(단 매우 번거롭다;;)

ex) <div  style="background-color: #006600; width: 400px;FONT-SIZE: 36px;  TEXT-ALIGN:center; padding: 20px 0px 20px 0px;">테스트</div>

이렇게 하면 내용이 가로세로 모두 가운데 정렬이 된것을 알 수 있다.

높이는 폰트크기 36+ 위아래여백 20 으로 높이가 76이 된다