如何在中心获取此菜单栏

I need some help, how can I place the navigation bar in the center? I tried using the text-align tag but that does not seem to be working!

我需要一些帮助,如何将导航栏放在中心?我尝试使用text-align标签,但似乎没有用!

as you can see the navigation bar is more close to the left margin and I want it to be in the center!

你可以看到导航栏更接近左边距,我希望它在中心!

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

6 个解决方案

#1

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

#2

The CSS part :

CSS部分:

#menubar {
display: inline-block;
text-align: center;
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;
}

The HTML5 Part:

HTML5部分:

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

#3

You can add a fixed width to your menu and apply an auto margin to it.

您可以为菜单添加固定宽度并为其应用自动边距。

margin: 0 auto;

保证金:0自动;

Or you can use Flexbox to do so.

或者您可以使用Flexbox来执行此操作。

#menubar {
  display: flex;
  justify-content: center;
  margin: -0px;
  padding: 0px;
  text-align: center;
}

You will need some autoprefixing for the flexbox rules though.

但是,您需要对flexbox规则进行一些自动修复。

Here is a Fiddle.

这是一个小提琴。

#4

You can set it using 'display'

你可以用'display'来设置它

#menubar {
    width: 100%;
    text-align: center;
}
#menubar-container {
    display: inline-block;
}

#menubar {
  width: 100%;
  text-align: center;
}

#menubar-container {
  display: inline-block;
}

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

#5

don't use float if you want to use text-align:center

如果要使用text-align:center,请不要使用float

see snippet it will work

看它会起作用的代码片段

#menubar {
  margin: -0px;
  padding: 0px;
  text-align: center;
}

#menubar a {
  text-decoration: none;
  color: darkgrey;
  text-transform: uppercase;
  display: inline-block;
  margin: 0px;
  padding: 10px;
}

#menubar ul li {
  display: inline-block;
  margin-left: 1px;
  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>

#6

Check if this fiddle helps

检查这个小提琴是否有帮助

CSS:

#menubar { 
  margin: -0px; 
  padding:0px; 
  text-align:center; 
  display: inline-block;
  width: 100%;
  margin: 0 auto;  
} 

#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;
}

#menubar-container {
  display: inline-block;
}

body {
  background: darkgrey; 
}

#1

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

#2