IE7 垂直和水平图像居中答案

【问题标题】：IE7 Vertical & Horizontal Image CenteringIE7 垂直和水平图像居中
【发布时间】：2011-12-20 17:53:42
【问题描述】：

我正在尝试在固定的高度和宽度内将图像垂直和水平居中对齐。我的代码在 FF、Chrome、Safari 和 IE8+ 中运行良好，但在 IE7 中运行良好，我终生无法找到解决方法。

目前，图像可以具有不同的高度和宽度，但如果我找不到好的修复方法，我想我可以更严格地控制高度并使用久经考验的居中技术。

实时示例位于jsfiddle

有人有什么好主意吗？

【问题讨论】：

标签： css internet-explorer-7 centering

【解决方案1】：

因为<img> 元素默认为display: inline;，所以我们可以像文本一样将它们居中：

a {
    height: 180px;
    width: 150px;
    display: block;
    text-align: center;
    border: 1px solid black;
    margin: 10px;
    line-height: 180px;
}
a img {
    vertical-align: middle;
}

jsFiddle Demo

【讨论】：

这确实解决了我的 IE7 问题，但由于某种原因，它在 webkit 浏览器中不起作用！任何想法为什么？
它在 Chrome 16 中对我来说很好用。确保您的 line-height 和 height 相同：jsfiddle.net/Daniel_Hug/63yaQ/1

【解决方案2】：

我之前遇到过这个丑陋的问题，我按照以下方式解决了它。这个想法是使用css作为背景图像的图像。我认为/希望它适用于 ie7。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <style type="text/css">
            #wm_splash{
                position: absolute;
                top: 0;
                left: 0;
            }

            #wm_splash_loading {
                background-image: url('images/loading.gif'); /* the loading image (animated gif)*/
                height: 80px;                                     /* loading image height */
                width: 285px;                                     /* loading image width*/
                padding: 0px 0 0 0px;
                text-align: center;
            }
       </style>
       <title>Loading...</title>
    </head>

    <body>

        <div id = "wm_splash" style = "width : 100% ; height : 100%">
            <table width = "100%" height = "100%" >
                <tbody>
                    <tr>
                        <td width = "100%" height = "100%" align = "center" valign = "middle">
                            <div id = "wm_splash_loading"> loading... </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>      
    </body>
</html>

【讨论】：

喜欢这个想法，但由于我们在项目中使用的 CMS，这实际上是不可能的