1

我正在运行一些基本的初学者教程，以了解如何正确运行 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;
     }
4

3 回答 3

3

您没有 Doctype。这会让你进入Quirks 模式（不兼容之地）。

添加一个作为文档中的第一件事。

<!DOCTYPE html>
于 2013-06-18T13:24:53.070 回答
1

您需要添加一个DOCTYPE. 这是一个例子HTML5 DOCTYPE

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>


        HTML here


</body>
</html>
于 2013-06-18T13:27:07.673 回答
1

在我看来它看起来不错：

http://jsfiddle.net/Riskbreaker/JH7NK/

如果您的意思是您的 h1 垂直顶部有额外的空间。

我编辑给你看：

div h1 {margin: 0}
于 2013-06-18T13:47:19.197 回答