Fatal编程技术网

Css 在

css

Css 在,css,Css,我知道这里有很多关于这个话题的答案，相信我，我已经试过了，但我一定很愚蠢，哈哈，我的中心总是偏右。这里一定有什么我不明白的地方。如果有人愿意花时间告诉我为什么这不是正确的居中，我将不胜感激 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"/> <script type="text/javascript" sr

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

<!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>
首先，把你的第一个放在盒子里

你读过W3Schools页面了吗？

将你的div移到身体内。在正文之外有div是无效的HTML

“关闭到右中心”的问题是因为默认情况下浏览器会向的添加一个左填充，因此需要将其归零以使其居中：

您可能有兴趣使用删除默认浏览器样式的。是否尝试删除navlist和navlist上的边距/填充？我没试过，但我最好的猜测是看一眼。而且，嗯……你似乎有一个嵌套在。这是不允许的。我不知道这个规则，但是谢谢你让我知道，我已经将我的第一个div移到了身体中，但是对齐问题仍然存在..哈！！非常感谢你！这确实是个问题，我觉得自己真的很愚蠢，读了两天都没发现有人提到浏览器在a的左边添加了填充物，但我确实怀疑有这种情况，因为当我将它对齐左边时，确实有填充物，我只是不知道如何修复它，我想。。再次感谢！ 
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;
}

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

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