自己在写排列图片然后让图片居中显示的CSS的时候，遇到的问题，怎么也找不到问题的所在。思来想去，也还是没有办法，想要放弃换一种实现方式的时候看到了这篇文章，于是问题解决了。感谢作者.原文如下：
I'm setting up a small photo-album-type thing, where I use PHP to set up a list of images for visitors to click through. That's all simple enough. However, I'm having a weird bug in IE8. Because the images can all be of different sizes (nothing I can do about that... outside my control), I use a CSS trick to get them all centered both vertically and horizontally, and scaled down to a proper size. Basically, I put the image tag inside two div tags, the first one to align the divs horizontally, and the second to align the image both horizontally and vertically. Then the image tag scales down images that are to large using the max-height and max-width styles. That all looks like this: (Added the borders to see the exact position of the divs)
Expand|Select|Wrap|Line Numbers
#GalleryPreview {
width : 400px;
height : 290px;
margin : 0 auto;
border : 1px solid #0000ff; /* For debuging */
}
#GalleryPreview_VerticalFix {
width: 400px;
height : 290px;
display : table-cell;
vertical-align : middle;
text-align : center;
border : 1px solid #00ff00; /* For debuging */
}
#GalleryPreview img {
max-width : 400px;
max-height : 290px;
}
Expand|Select|Wrap|Line Numbers
<div id="GalleryPreview">
<div id="GalleryPreview_VerticalFix">
<img src="PHP Generated" alt="Image Preview" />
</div>
</div>
This works in all the standard supporting browsers. Everything is scaled down and centered perfectly. IE7 fails to do the vertical alignment, but that's good enough for IE. IE8, on the other hand, does something much worse. For images that scale down to less then the set max-width, this works perfectly to. It centers them both vertically and horizontally. But when images scale down to exactly the max-width, the table-cell appears to forget it was scaled down, expanding itself until it reaches the width of the original image size. But it still centers the image correctly... just way out of place. (See the images I attached. One is from Firefox, the other IE8) I'm thinking this must be a bug in IE (shocking, I know). I mean, the image is scaled, but it's original width is being used by it's parent, which is not the case with the height. Either this was the intended behavior and the height is bugged, or it's not and the width is. In any case, does anybody know a workaround, or another method to center the images? I'll keep looking, hopefully find something before I just drop IE support altogether :)