DIV 안의 엘리먼트 세로 정렬

FF를 포함한 최신 브라우저와 IE 8 이상의 경우 height 값을 지정하고 display:table-cell;vertical-align:middle;  값을 지정하면 세로정렬이 된다. 하지만 IE 7 의 경우에는 추가로 line-height:세로값px; 을 지정해줘야 작동한다.

HTML

<div class="entry">

    <img src="<?php echo $img['original']?>" alt="<?php echo $R['subject']?>" class="photo">
</div>

CSS

.entry {width:960px;height:450px;display:table-cell;line-height:450px;vertical-align:middle;text-align:center}

IE 7 의 경우 문제가 되는 상황의 예

CSS 코드

• height:500px
  
• display:table-cell
• vertical-align:middle
• line-height:500px;
  

IE 8 이상 (FF,CR,OP 포함) 의 경우

IE 7 만 사라져도 세상 조금 더 평화로와질 것이다.