css – 在div中居中图像？

我在这样的div中有一个图像

<div><img /><div>

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

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

>不确定图像是否小于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>

这是一个使用CSS而不是将标记更改为实际表的update：

#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>

css – 在div中居中图像？

解决方法

猜你在找的CSS相关文章