Question

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

Answer 1

您没有Doctype。这会让你进入Quirks mode（不相容的土地）。

在文档中首先添加一个。

<!DOCTYPE html>

Answer 2

您需要添加DOCTYPE。这是HTML5 DOCTYPE

的示例

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


        HTML here


</body>
</html>

Answer 3

我最终看起来很好：

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

如果你的意思是额外的空间，你的垂直顶部就是你的h1。

我编辑给你看：

div h1 {margin: 0}

Div margin：在Chrome，IE中自动不居中页面

3 个答案: