我需要一些帮助，如何将导航栏放在中心？我尝试使用 text-align 标签，但似乎不起作用!
如您所见，导航栏更靠近左边距，我希望它位于中间!
#menubar {
margin: -0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: block;
margin: 0px;
padding: 10px;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
float: left;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css" />
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Cosa facciamo</a></li>
<li><a href="#">Tree-Climbing</a></li>
<li><a href="#">Galleria</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
</div>
</div>
</head>
</html>最佳答案
#menubar {
margin: 0px;
padding: 0px;
text-align: center;
}
#menubar a {
text-decoration: none;
color: darkgrey;
text-transform: uppercase;
display: block;
margin: 0px;
padding: 10px;
}
#menubar ul {
display: flex;
padding-left: 0;
flex-wrap: wrap;
width: auto;
justify-content: center;
}
#menubar ul li {
display: inline-block;
margin-left: 1px;
float: left;
font-family: sans-serif;
font-size: large;
background-color: white;
}
body {
background: darkgrey;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project.css" />
<div id="page">
<div id="menubar">
<div id="menubar-container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Cosa facciamo</a></li>
<li><a href="#">Tree-Climbing</a></li>
<li><a href="#">Galleria</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
</div>
</div>
</head>
</html>关于html - 我怎样才能在中心得到这个菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43675666/