我在这样的div中有一个图像
<div><img /><div>
图像是动态的,没有固定的大小. div的大小为200px×200px.事先不知道图像尺寸.如果图像的大小大于190像素×190像素,则将其设置为190像素×190像素(即最大宽度：190像素,最大高度：190像素).如何满足这些需求,使图像居中？我也需要一个在Internet Explorer 7中工作的解决方案.
>不确定图像是否小于200像素.
>我也想要水平对齐.
>没有Internet Explorer 7支持.
(Stack Overflow上有一些关于相同问题的问题,但我的情况不同,所以它们不适用于这个特定的问题.)
解决方法
解决方案是将div更改为表.通常情况下,您不应该使用表格进行定位,但是对于较旧的非标准兼容浏览器,有时候这是唯一的选择.
Demonstration here.为了记录,这也适用于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>
#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>
