html - 我的栏根本不居中，我该如何解决这个问题？

Question

我是新来的，所以这是我的第一个问题。可能有点愚蠢，但我无法解决这个问题。我创建了一个导航栏，但它根本没有居中:

因此，如您所见，在显示“galeria”的地方，显然它不在导航栏的中心。这是我的代码和这个导航栏的 css。先感谢您! :D

    <ul class="nav">
        <li><a class="link" href="/">concerts</a></li>

        <li><a class="link" href="/about/">discografia</a></li>

        <li><a class="link" href="/work/">galeria</a></li>

        <li><a class="link" href="/clients/">botiga</a></li>

        <li><a class="link" href="/contact/">contacte</a></li>
    </ul>

这是我的导航栏 CSS 样式表:

.nav{
list-style:none;
margin:10px;
padding:150px;
text-align:center;}
.nav li{
display:inline-block;}
.nav a{
text-decoration: none;
color: #b8d2db;
color: #fff;
width: 150px;
display: inline-block;
padding: 15px;
font-size: 30px;
transition: 0.4s;
font-family: 'Montserrat Alternates', sans-serif;}
.link:hover {
color: #fcff90;}

Answer 1

它是居中的，只是看起来不像，因为单词的长度是可变的，而且您没有任何视觉识别边界。

演示:

.nav {
  list-style: none;
  margin: 10px;
  padding: 150px;
  text-align: center;
}

.nav li {
  display: inline-block;
  border: 1px solid white;
}

.nav a {
  text-decoration: none;
  color: #b8d2db;
  color: #fff;
  width: 150px;
  display: inline-block;
  padding: 15px;
  font-size: 30px;
  transition: 0.4s;
  font-family: 'Montserrat Alternates', sans-serif;
}

.link:hover {
  color: #fcff90;
}

body {
  background-color: black;
}

<ul class="nav">
  <li><a class="link" href="/">concerts</a></li>

  <li><a class="link" href="/about/">discografia</a></li>

  <li><a class="link" href="/work/">galeria</a></li>

  <li><a class="link" href="/clients/">botiga</a></li>

  <li><a class="link" href="/contact/">contacte</a></li>
</ul>

解决此问题的一种方法是删除显式的 width您在 <a> 上设置的属性

.nav {
  list-style: none;
  margin: 10px;
  padding: 150px;
  text-align: center;
}

.nav li {
  display: inline-block;
}

.nav a {
  text-decoration: none;
  color: #b8d2db;
  color: #fff;
  display: inline-block;
  padding: 15px;
  font-size: 30px;
  transition: 0.4s;
  font-family: 'Montserrat Alternates', sans-serif;
}

.link:hover {
  color: #fcff90;
}

body {
  background-color: black;
}

<ul class="nav">
  <li><a class="link" href="/">concerts</a></li>

  <li><a class="link" href="/about/">discografia</a></li>

  <li><a class="link" href="/work/">galeria</a></li>

  <li><a class="link" href="/clients/">botiga</a></li>

  <li><a class="link" href="/contact/">contacte</a></li>
</ul>