0

我需要帮助使这个导航菜单居中。我对 css 还很陌生，需要完成一个学校项目 

<html>
<head>
<title>Website</title>
<link rel="icon" " href="favicon.ico" />
<style>
ul.menu{list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;}
li.menu{display:inline;}
a:link,a:visited.menu{font-weight:bold;color:#FFFFFF;background-color:#35BFD7;text-    align:center;padding:6px;text-decoration:none;text-transform:uppercase;}
a:hover,a:active.menu{background-color:#3597FF;}
body{background-image:url('background.gif');background-size:100% 100%;}
</style>
</head>
<body>
<ul class=menu>
<li class=menu><a href="default.asp">Home</a></li>
<li class=menu><a href="news.asp">News</a></li>
<li class=menu><a href="contact.asp">Contact</a></li>
<li class=menu><a href="about.asp">About</a></li>
</ul>
</body>
</html>
4

4 回答 4

0 
<html>
<head>
<title>Website</title>
<link rel="icon" " href="favicon.ico" />
<style>
ul.menu{list-style-type:none;margin-left: auto;margin-right: auto;
width: 334px;padding:0;padding-top:6px;padding-bottom:6px;}
li.menu{display:inline;}
a:link,a:visited.menu{font-weight:bold;color:#FFFFFF;background-color:#35BFD7;text-    align:center;padding:6px;text-decoration:none;text-transform:uppercase;}
a:hover,a:active.menu{background-color:#3597FF;}
body{background-image:url('background.gif');background-size:100% 100%;}
</style>
</head>
<body>
<ul class=menu>
<li class=menu><a href="default.asp">Home</a></li>
<li class=menu><a href="news.asp">News</a></li>
<li class=menu><a href="contact.asp">Contact</a></li>
<li class=menu><a href="about.asp">About</a></li>
</ul>
</body>
</html>
于 2013-04-12T01:17:22.387 回答
0

只需添加text-align:center到您的<ul>. 这将使所有元素display:inline居中。display:inline-block

jsFiddle

ul.menu {
    text-align:center;
}
于 2013-04-12T01:12:51.990 回答
0

假设您希望文本在页面中居中，而不仅仅是内嵌音乐，只需添加

body {
  text-align: center;
}

如果需要，将 ul 包装在 div 中，然后将其居中。

于 2013-04-12T01:13:27.503 回答
0

如果您希望文本水平居中，那么“文本对齐：中心”应该可以解决问题。

但是，如果您希望所有列表项在一行中并排显示，则需要指定：

li {
    display: inline-block;
}
于 2014-12-02T21:29:52.140 回答