我正在运行一些基本的初学者教程，以学习如何正确运行html。我已经到了在css中使用div标签来居中内容的部分。然而，一旦我打开测试页面，所有内容都锁定在浏览器的右侧。我一直在搜索论坛的任何解决方案，似乎没有解决这个问题。在Chrome和IE中测试。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1> My Website </h1>
<p><a href="about/about.html">Learn more about me.</a></p>
<img src="img/lady.jpg" alt="skyrim">
<h2>My New Section </h2>
</div>
</body>
</html>
CSS:
a {
color: red;
text-decoration: none;
}
h1 {
font-family: sans-serif;
}
div {
width: 500px;
margin: 0 auto;
background: red;
text-align: center;
}
您没有Doctype。这会让你进入怪癖模式(不相容之地)。
添加一个作为你的文档的第一件事。
<!DOCTYPE html>
在我的结尾看起来很好:
http://jsfiddle.net/Riskbreaker/JH7NK/如果你指的是你在顶部垂直的额外空间，那就是你的h1。
我编辑给你看:
div h1 {margin: 0}
需要添加DOCTYPE。这是HTML5 DOCTYPE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML here
</body>
</html>