CSS의 표 모양의 이미지 격자 (꼬임이 있음)

Question

표 모양의 이미지 격자를 만들고 싶습니다. 각 축소판 이미지 (크기 및 방향이 다를 수 있음)는 자체 DIV에 가운데 놓여 있습니다.

XXXX
XXXX
XX

을 : 각 행은 그 후 나는 결과는 다음과 같이 찾고, 주위를 둘러싸는 TD의 크기에 의한 자동 "줄 바꿈"일하기를 원하는, 네 개의 이미지를 포함해야

아래의 코드는 Firefox, Opera, Safari, Chrome에서 의도 한대로 작동합니다. 그러나 Internet Explorer 7/8/9에서는 두 가지 문제가 발생합니다.

1) 이미지의 중심이 수직이 아니며 DIV 상단에 위치합니다.
2) "줄 바꿈"이 발생하지 않습니다. 이미지의 행 ... 오른쪽 시야 밖으로 사라

CSS :

.outer-div {display: inline; float:left; clear:right;} 

.inner-div 
{ 
width: 220px; 
height: 220px; 
display: table-cell; 
vertical-align: middle; 
} 

HTML :

<div class="outer-div"><div class="inner-div">img.jpg</div></div> 

Answer 1

당신은 .inner-div CSS에이를 추가 할 수

:

*display:inline; 
zoom:1; 

나는 IE가 display:table-cell을 인식하지 못하기 때문에 무슨 일이 일어날 것이라고 생각합니까? 해킹 (또는 display:inline과 zoom:1을 사용하는 IE 만 알려주는 다른 방법).