Question

我有一个没有固定高度的div元素，我想让它在其父元素内垂直居中，而不管其高度如何。我对现代浏览器使用display: table-cell技术，但似乎这种技术在IE7及以下版本中不起作用。有没有办法在IE7及以下的纯CSS中实现这种垂直居中的效果？提前致谢。

Answer 1

您可以将容器的height值设置为其line-height属性，将display:inline-block设置为居中元素。

HTML：

<div id="container">
    <span>content</span>
</div>

CSS：

#container {
    display: table-cell; vertical-align:middle;
    border:1px solid red;
    height:300px;
    background-color:green;
    width:400px;
    text-align:center;
    line-height:300px; /* Same as height */
}
#container>span{
    background-color:lightblue;
    height:50px;
    width:100px;
    line-height:normal;
    display:inline-block; 
    vertical-align:middle;
}

请在此处查看：http://jsfiddle.net/9TE5t/4/

但请注意，在IE 7及更早版本中，如果将display:inline-block设置为默认的块元素（例如<div>），则其行为类似于display:block。

然后，您可以使用默认的内联元素（例如<span>），或者使用IE条件注释并设置display:inline（它们的行为类似于display:inline-block）如果浏览器是IE7或早。

如何在IE7和IE6中垂直居中一个元素？

1 个答案: