使用html css将元素居中_Html_Css

使用html css将元素居中

html css

使用html css将元素居中,html,css,Html,Css,我的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> 但是c

我的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>

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

您应该在文档开头添加一个

，同时删除

显示：块从div选择器中，div默认为块级元素，因此此声明没有任何意义。（这不会破坏布局，只是告诉已经是块级别的元素再次被块没有意义。）
除此之外，您的CSS非常好：）
HTML:
对于IE 7怪癖模式（和IE 6），您可以添加
html, body{
    text-align: center;
}
div#content{
    text-align: left;
}

要使分区居中。。。（old skool）
我很确定，除了文本之外，它不会做任何事情来居中任何东西：@KyleSevenoaks除了问题的CSS之外，它实际上会居中div…在IE 7怪癖中打开这个，啊哈，除了CSS之外。应该在答案中明确一点。您可以在答案中添加
<!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>

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

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

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