DIV 내에 이미지를 정 중앙에 놓고 싶을 때가 가끔 생기는데요. 가운데 정렬은 DIV 스타일에서 "text-align: cetner;" 로 간단히 해결 할 수 있습니다.
문제는 수직에서의 중앙인데요. 보통 middle 이라고 부릅니다. CSS에서는 vertical-align 속성으로 지정하면 middle로 올 것 같은데 결론은 오지 않습니다.
별별 방법을 찾고 또 시도해 본 끝에 결국 테이블을 써야 될 것 같았습니다. (TABLE의 TD는 vertical-align 속성이 잘 먹습니다. ) 한가지 고집은 레이아웃을 할 때 모두 CSS로 하고 싶었습니다. TABLE로 레이아웃를 하면 편한 점도 있지만 TABLE은 TABLE의 역할에 맞게 사용을 하고 싶은 고집을 버리고 싶지는 않은 거죠.
일단 TABLE에서 힌트를 얻었지만 TABLE 태그를 사용하지 않는 방법을 찾아보았습니다.
CSS의 display 속성을 활용할 수 있다는 외국 사이트에서 코멘트를 발견을 했지요. ^^
짠 ~ "display: table" 과 "display: table-cell" 입니다.
아래 소스는 500x400 사이즈 DIV안에 400x300 사이즈 IMG를 가로, 세로 정중앙에 정렬 시킵니다.
<div style="display: table; width: 500px; height: 400px">
<div style="display: table-cell; text-align: center; vertical-align: middle; ">
<img src="" style="width: 400px; height: 300px;" />
</div>
</div>