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