CSS divs: margin:auto on vertical for IE7

<div id="wr">
    <div id="unknownWidthAndHeight">should be centered on both sides</div>
</div>
#wr {
    display:table-cell;
    width:400px;
    height:100px;
    border:1px solid red;
    margin:50px;
    vertical-align:middle;
}
#unknownWidthAndHeight{
    display:table;
    height:30px;
    margin:auto;    
    border:1px solid blue;
}

下面是一个简单的例子:http://jsfiddle.net/gdTGZ/2/

需要这样的支持IE7没有display:table等，没有<table>使用

1/如果你想在IE7上垂直居中尝试使用以下三个div:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Ps:你总是需要设置容器的高度。

2/您想要水平居中的元素必须有width和margin:0 auto;，否则您可以尝试text-align:center

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
        <style type="text/css">
#wr {
    display: block
    width: 400px;
    height:100px;
    line-height: 100px;  /* must be the same as height */
    border: 1px solid red;
    margin:50px;
}
#unknownWidthAndHeight{
    vertical-align: middle;
    text-align: center;
}
    </style>
</head>
<body>
        <div id="wr">
            <div id="unknownWidthAndHeight">should be centered on both sides</div>
        </div>
</body>
</html>

相关内容

最新更新

热门标签：