我的测试页面的链接——我正在测试 nav-ul-li 栏居中的地方——如下:http://bramh.coornhert.website/startpagina.html
代码如下:
header {
color: GhostWhite;
text-align: center;
font-size: 60px;
margin: 0px;
font-family: courier new;
}
body {background-image: url("images/wallpapermain.jpg");
color: white;
}
p { border-width: 3px;
border-style: groove;
border-color: light-blue;
background-color: black;
border-radius: 10px;
height: 1200px;
width: 1000px;
text-align: center;
font-family: "verdana";
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
}
img {border-radius:10px;
}
a:link.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:visited.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:hover.img { color: red;
text-decoration:underline;
font-weight:bold;
}
/* menu */
a:link,a:visited {
font-weight: bold;
color: white;
background-color: black;
border: 2px #033 ridge;
border-radius: 10px;
width: 140px;
text-align: center;
padding: 4px;
margin-bottom: 10px;
text-decoration: none;
}
a:hover,a:active {
background-color: dark-grey;
color: orange;
width: 140px;
}
nav {
width: 800px;
height: 30px;
padding-top: 0px;
}
ul {
margin:0;
position: fixed;
list-style-type: none;
padding: 0;
text-align: center;
}
nav{
text-attachment: fixed;
}
a.huidig_blauw {
background-color: white;
color: black;
}
a.huidig_rood {
background-color: green;
color: black;
width: auto;
}
a.tweede_menu {
background-color: red;
color: blue;
width: auto;
}
/* CSS Document */<!DOCTYPE html>
<head>
<title>Website Bram</title>
<link href="shoop.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>Bram Heesen</header>
<nav>
<ul>
<li>
<a class="huidig_blauw" href="startpagina.html">HOME</a>
<a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a>
<a class="huidig_rood" href="paginamijzelf.html">Over Mij</a>
<a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a>
</li>
</ul>
</nav>
<p>
<br><br>
<audio controls="controls"autoplay="autoplay">
<source src="music/chiptune.ogg" type="audio/ogg" />
<source src="music/chiptune.mp3" type="audio/mpeg" />
Sorry, je internetprogramma kan deze muziek niet laten horen.
</audio>
</p>
</body>
</html>最佳答案
将来您应该直接在您的帖子中提供您的代码，这样如果以后有人偶然发现您的问题，他们就可以看到问题所在。如果您链接到您的网站，然后在该网站上解决您的问题，或者该网站不再可用，则该链接与问题无关。
也就是说，您可以通过删除 float:left; 并将 text-align:center; 添加到 ul 来使菜单元素居中>.
ul {
list-style-type: none;
padding: 0;
text-align: center;
}
欢迎来到 SO!
使用 OP 的代码进行更新
header {
color: GhostWhite;
text-align: center;
font-size: 60px;
margin: 0px;
font-family: courier new;
}
body {background-image: url("images/wallpapermain.jpg");
color: white;
}
p { border-width: 3px;
border-style: groove;
border-color: light-blue;
background-color: black;
border-radius: 10px;
height: 1200px;
width: 1000px;
text-align: center;
font-family: "verdana";
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
}
img {border-radius:10px;
}
a:link.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:visited.img { color:#007DC5;
text-decoration:none;
font-weight:bold;
}
a:hover.img { color: red;
text-decoration:underline;
font-weight:bold;
}
/* menu */
a:link,a:visited {
font-weight: bold;
color: white;
background-color: black;
border: 2px #033 ridge;
border-radius: 10px;
width: 140px;
text-align: center;
padding: 4px;
margin-bottom: 10px;
text-decoration: none;
}
a:hover,a:active {
background-color: dark-grey;
color: orange;
width: 140px;
}
nav {
height: 30px;
padding-top: 0px;
}
ul {
margin:0;
list-style-type: none;
padding: 0;
text-align: center;
}
nav{
text-attachment: fixed;
}
a.huidig_blauw {
background-color: white;
color: black;
}
a.huidig_rood {
background-color: green;
color: black;
width: auto;
}
a.tweede_menu {
background-color: red;
color: blue;
width: auto;
}
/* CSS Document */<header>Bram Heesen</header>
<nav>
<ul>
<li>
<a class="huidig_blauw" href="startpagina.html">HOME</a>
<a class="huidig_rood" href="paginainformatica.html">Pagina Informatica</a>
<a class="huidig_rood" href="paginamijzelf.html">Over Mij</a>
<a class="huidig_rood" href="paginakeuzeonderwerp.html">PaginaKeuzeonderwerp</a>
</li>
</ul>
</nav>
<p>
<br><br>
<audio controls="controls"autoplay="autoplay" >
<source src="music/chiptune.ogg" type="audio/ogg" />
<source src="music/chiptune.mp3" type="audio/mpeg" />
Sorry, je internetprogramma kan deze muziek niet laten horen.
</audio>
</p>关于css - 我希望我的导航栏居中，但我所做的任何事情似乎都不会影响它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42377533/