Question

我试图在固定的高度和宽度内垂直和水平对齐图像。我在FF，Chrome，Safari和IE8 +上运行的代码都很好，但IE7并没有，我不能为我的生活找到一个解决方法。

目前，图像可以有不同的高度和宽度，但如果我找不到一个好的修复方法，我想我可以对高度更加严格，并依靠经过试验和测试的定心技术。

实例位于jsfiddle

有人有什么好主意吗？

Answer 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

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

IE7 Vertical＆amp;水平图像居中

2 个答案: