Question

我需要一些帮助，如何将导航栏放在中心？我尝试使用text-align标签，但这似乎不起作用！

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

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>

Answer 3

您可以使用＆＃39;显示＆＃39;

进行设置

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

如果你想使用text-align：center

，请不要使用float

查看代码段，它会起作用

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

margin: 0 auto;

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

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

虽然您需要一些 autoprefixing 来支持flexbox规则。

这是 Fiddle.

Answer 6

检查this小提琴是否有帮助

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

如何在中心获取此菜单栏

6 个答案: