Question

此代码适用于FF和Chrome，但IE不行。

如何使用IE（9,8,7）修复此代码？

<html>
<head>
<style type='text/css'> 
.center{
    background-color: #336699;
    width: 200px;
    height: 200px;
    display: table;
}
.sub{
    display: table-cell ;
    vertical-align: middle;
    text-align: center;
}
</style> 
</head>
<body>
<div class="center">
   <span class="sub">
       Some text text...<br />
       An some more text...
   </span>
</div>
</body>

Answer 1

它在IE9 / 8中不起作用的原因是因为您缺少DOCTYPE。它仍然不能在IE7中工作，但如果你制作跨度显示块并调整边距，你可以看到它看起来一样。看我的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'> 
.center{
    background-color: #336699;
    width: 200px;
    height: 200px;
    display: table;
}
.sub{
    display: table-cell ;
    vertical-align: middle;
    text-align: center;
}
</style>
<!--[if IE 7]>
    <style type='text/css'>
        .sub {
        display: block;
        margin: 70px auto;
    </style>    
<![endif]-->
</head>
<body>
<div class="center">
   <span class="sub">
       Some text text...<br />
       An some more text...
   </span>
</div>
</body>

Answer 2

vertical-align：div的中间不会垂直居中。它将尝试将段落与前一个和后一个元素对齐。由于div是块级元素（并且周围元素也是如此），因此vertical-align：middle将完全没有效果。

您可以使用行高来居中其内容。

Answer 3

使用此

body { padding: 0; margin: 0px;}
.Center { margin: 0 auto;}

到处都欢迎

css：垂直和水平对齐，IE

3 个答案: