css：垂直和水平对齐，IE

这段代码和FF和Chrome一起工作正常，但IE不行。css：垂直和水平对齐，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>

来源

2011-05-04 lolalola

这有什么错呢？ – Flash 2011-05-04 12:21:32

有120个问题，你现在应该知道“这个工作，那不”完全没用，并且会让你的问题无处可寻。 – BoltClock 2011-05-04 12:22:09

您应该添加一个，最好是HTML5的文档类型，然后查看是否可以解决问题。此外，我假设您的完整源代码确实包含关闭标记; P – lpd 2011-05-04 12:25:50

它不是在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>

来源

2011-05-04 12:44:40 Atari

您应该修复答案的格式。编辑它，并选择你的代码。然后，按下“{}”按钮。 – thirtydot 2011-05-04 12:47:37

一个，谢谢。刚刚在昨天创建了一个帐户:-) – Atari 2011-05-04 12:58:16

如果'.center'位于display：block'元素内，该怎么办？可能吗？ – 2015-11-09 12:54:05

vertical-align：中间的div不会垂直居中其内容。它将尝试将该段与前面和后面的元素对齐。由于div是块级元素（并且周围的元素也是如此），因此vertical-align：middle将根本无效。

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

来源

2011-05-04 12:47:02 salahuddin

在这种情况下，'div'具有'display：table-cell'，它可以使'vertical-align：middle'工作。 @mauteri对这个问题有正确的答案。 – thirtydot 2011-05-04 12:49:20

使用本

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

是到处受欢迎

来源

2011-05-04 13:03:55

这不处理*垂直*对齐。 – thirtydot 2011-05-04 13:17:51

css：垂直和水平对齐，IE

回答

相关问题