我在这样的div中有一个图像
@H_404_2@<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
@H_404_2@#theDiv { width: 200px; height: 200px; text-align: center; vertical-align: middle; } #theImg { max-width: 190px; max-height: 190px; }HTML
@H_404_2@<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> @H_404_2@#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>