将图像置于div内？

Question

我在这样的div里面有一个图像

<div><img /><div>

图像是动态的,没有固定的大小.div的大小200px by 200px.事先不知道图像尺寸.如果图像的大小大于190px by 190px,则将其设置为190px by 190px(即max-width:190px,max-height:190px).如何满足这些需求,使图像居中？我需要一个在Internet Explorer 7中工作的解决方案.

此处和此处的解决方案无法应用于我的问题,因为

1. 不确定图像是否小于200像素.

2. 我也想要水平对齐.

3. 没有Internet Explorer 7支持.

(Stack Overflow上有一些关于相同问题的问题,但我的情况不同,所以它们不适用于这个特定的问题.)

Answer 1

解决方案是将其更改div为表格.通常情况下,您不应该使用表格进行定位,但是对于较旧的非标准兼容浏览器,有时候这是唯一的选择. 在这里示范.对于记录,这也适用于Internet Explorer 6.

码:

CSS

#theDiv
{
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}?

HTML

<table id="theDiv" style="border: solid 1px #000">
    <tr>
        <td>
    <img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
        </td>
    </tr>
</table>

这里有一个更新使用,而不是改变的标记,以实际的表CSS:

#theDiv
{
    display: table;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}

.tr {
  display: table-row;
}
.td { 
  display: table-cell;
  vertical-align: middle;
}

<div id="theDiv" style="border: solid 1px #000">
    <div class="tr">
        <div class="td">
    <img id="theImg" src="http://lorempixel.com/100/100/" />
        </div>
    </div>
</div>