简单的 HTML 应在页面中心显示 div
为什么这个极其简单的网页不在页面中央显示 id 为“mainContent”的 div。
现在 div 位于左侧。但我希望 div 位于网页（body 元素）的中心。
出了什么问题吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style type="text/css">
<!--
body {
text-align: center;
background-color: red;
}
#mainContent {
width: 800px;
background-color: blue;
}
#content {
width: 600px;
float: left;
background-color: green;
overflow: hidden;
}
#sidebar {
width: 200px;
float: left;
background-color: yellow;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainContent">
<!-- Left Column/Bar -->
<div id="content">
<p>content</p>
</div>
<!-- Right Column/Bar -->
<div id="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
Why doesn't this EXTREMELY simple webpage show the div with the id "mainContent" in the centre of the page.
Right now the div is on the left. But I would like the div to be centred in the webpage(body element).
Whats going wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style type="text/css">
<!--
body {
text-align: center;
background-color: red;
}
#mainContent {
width: 800px;
background-color: blue;
}
#content {
width: 600px;
float: left;
background-color: green;
overflow: hidden;
}
#sidebar {
width: 200px;
float: left;
background-color: yellow;
overflow: hidden;
}
-->
</style>
</head>
<body>
<div id="mainContent">
<!-- Left Column/Bar -->
<div id="content">
<p>content</p>
</div>
<!-- Right Column/Bar -->
<div id="sidebar">
<p>sidebar</p>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您只需要添加
margin: 0 auto;即可使其顶部和底部的边距为 0，以及左侧和右侧的自动边距。You just need to add
margin: 0 auto;which gives it 0 margin on top and bottom, and automatic margins left and right.尝试一下。
text-align:center居中文本，不一定是页面上的所有元素。try that.
text-align:centercenters text, not necessarily all elements on the page.你还必须改变这一点
：
You have also to change that:
to that