Question

我的html页面是：

<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>

我的css文件是：

html, body{
    width: 100%;
    height: 100%;
}

div#content{
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 90%;
    border: 1px solid red;
}

但是内容div没有正确居中。我正在使用IE7查看此页面。

Answer 1

您应该在文档的开头添加<!doctype>，同时从div选择器中删除display: block;，div默认为块级元素，因此该声明没有意义。（这不会破坏布局，告诉已经块级元素再次阻塞是没有意义的。）

除此之外，你的CSS非常好：）

HTML：

<!doctype html>
<html>
<head>
<title>Hello there</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content">
Hello world
</div>
</body>
</html>

CSS：

html, body{
    width: 100%;
    height: 100%;
}

div#content{
    width: 80%;
    margin: 0 auto;
    height: 90%;
    border: 1px solid red;
}

http://jsfiddle.net/u5w8F/

Answer 2

对于IE 7 quirksmode（和IE 6），您可以添加

html, body{
    text-align: center;
}
div#content{
    text-align: left;
}

以div为中心......（旧skool）

使用html-css对元素进行居中

2 个答案: