Question

我有一个div和一些文本。使我的内容水平和垂直居中我使用CSS。它在Firefox中工作正常但在IE6中测试以下代码时内容不是垂直居中。

所以请指导我需要添加或更改我的CSS。

我的HTML代码是

<html>
<head>
<title>Vertical Centering</title>
<style>
.content {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background-color: green;
  height: 200px;
  width: 250px;

}
</style>
</head>
<body>
<div class="content">
Hello.
</div>
</body>
</html>

请看看我的CSS并告诉我为什么它不能在IE中工作也请以这样的方式纠正我的CSS，因此它应该在所有浏览器中看起来都一样。

感谢

Answer 1

您可以使用范围包装文本，然后设置position:relative和top:45%;

 .content span {
    position:relative;
    top:48%;    
}

直播示例：http://jsbin.com/ovabo4/3

Answer 2

在这里，您会找到一本很棒的指南：Vertical centering with CSS

Answer 3

一个好的方法是这样做，所以它总是正好在中间（只有你有一个固定的高度div才有效）

<div class="centered"></div>

html, body{height: 100%;}
.centered{height: 500px; width: 500px; position: relative; top: 50%; margin-top: -250px; /* Just use a negative margin that is half the height of your element */

垂直中心内容

3 个答案: