1

我知道这里有很多关于这个话题的答案，相信我我已经尝试过了，但我一定很愚蠢，哈哈，我的中心总是在右边。这里一定有一些东西我想念并且不明白。如果有人愿意花时间告诉我为什么这没有正确居中，我将不胜感激。

<!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;
}
4

2 回答 2

0

首先，把你的第一个<div>里面<body>

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

你读过这里的 W3Schools 页面吗？

于 2013-08-01T16:32:20.277 回答
0

将您的 div 移动到体内。在正文之外有 div 不是有效的 HTML。

您关闭到右侧中心的问题是因为浏览器<ul>默认为 's 添加了左侧填充，因此您需要将其归零以使其居中：

演示

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

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

于 2013-08-01T16:35:50.583 回答