css - 在 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 中工作的解决方案。

这里和这里的解决方案不能应用于我的问题，因为

不确定图像是否会小于 200 像素。
我也想要水平对齐。
不支持 Internet Explorer 7。

（在 Stack Overflow 上已经提出了一些同样的问题，但我的情况不同，所以它们不适用于这个特定问题。）

score 6 · Accepted Answer

解决方案是将更改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>

score 2 · Accepted Answer

看到这个小提琴：http: //jsfiddle.net/ANwmv/

按照以下建议解决居中问题：http ://www.brunildo.org/test/img_center.html

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.wraptocenter img { max-width: 190px; max-height: 190px; }
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

HTML：

<div class="wraptocenter"><span></span><img src="http://lorempixel.com/100/100" alt="..."></div>

score 0 · Accepted Answer

给父级一个与其自身高度相等的line-height和一个 center 的text-align属性。给图像一个中间的垂直对齐属性，使其在其行高内居中：

HTML：

    <html>
        <body>
            <div>
                <img src="http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png"/>                
            </div>
        </body>   
    </html>

CSS：

div, img {
 border: 1px solid black;  
}

div {
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

img {
  max-width: 190px;
  max-height: 190px;
  vertical-align: middle;    
}

JS 小提琴示例

score -1 · Accepted Answer

你可以这样做：

<div style="text-align:center;vertical-align:middle;"> 
    <img style="margin:0 auto" /> 
</div>

css - 在 div 中居中图像？

4 回答 4

Related

Reference