Question

我需要以此导航菜单为中心的帮助。我对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>

Answer 1

只需将text-align:center添加到<ul>即可。这将以所有display:inline和display:inline-block元素为中心。

jsFiddle

ul.menu {
    text-align:center;
}

Answer 2

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

即可

body {
  text-align: center;
}

如果你愿意的话，

将ul包装在div中，然后将其置于中心位置。

Answer 3

<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>

Answer 4

如果你想让你的文字水平居中，那么是'text-align：center'就可以了。

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

li {
    display: inline-block;
}

需要帮助集中此导航菜单css

4 个答案: