Question

我知道这个主题有很多答案，相信我已经尝试过但我必须是愚蠢的哈哈，我的中心总是在右边。我必须在这里找到一些我不知道的东西。如果有人愿意花时间告诉我为什么没有正确居中，我会非常感激。

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
<title>Company Name</title>
</head>

<div id="page">
<body>
<div id="header">
<h1>Company Name</h1>
<p>Company Slogan Here.</p>
</div>
<div class="navbar"><ul id="navlist"><li><a href="index.html">Home</a></li><li><a href="index.html">News</a></li><li><a href="index.html">Downloads</a></li><li><a href="index.html">About Us</a></li><li><a href="index.html">Contact Us</a></li></ul></div>
<h1>Bob's Bar</h1>
<p>Menu Items</p>
<ul><li>Pizza</li><li>Beer</li><li>Wings</li></ul>
</body>
</div>

</html>

CSS代码

html{
background-color: #d3d3d3;
}

#page{
 box-shadow: 5px 10px 5px #888888;
 background-color: white;
}

#header{
 padding: 10px 0px 10px 0px;
 text-align: center;
}

.navbar{
 background-color: #CD0000;
 color: white;
 box-shadow: 0px 10px 5px #888888;
 border: 1px solid #CD0000;
}

#navlist{
 text-align: center;
}

#navlist li{
 list-style: none;
 display: inline-block;
}

#navlist a{
color: white;
display: block;
margin: 0;
padding: 10px;
text-decoration: none;
}

Answer 1

首先，将您的第一个<div>放入<body>

<body>
<div id="page">
...
</div>
</body>

您是否阅读过W3Schools页面here？

Answer 2

将你的div移动到体内。将div放在身体之外是无效的HTML。

关于向右中心的问题是因为默认情况下浏览器会向<ul>添加左边距，所以你需要将其填零以使其居中：

Demo

#navlist{
  text-align: center;
  padding-left: 0;
}

您可能有兴趣使用CSS Reset删除默认浏览器样式。

在<div> </div>中水平居中

2 个答案: