对齐项目中心不起作用

Question

我试图用跨度中的a来垂直居中h1，但不知何故导航按钮比h1高几个像素。我试过解决这个问题，但我找不到办法。所以我希望你知道问题是什么。

＆＃13;

＆＃13;

h1 {
  font-family: sans-serif;
  font-size: 2em;
  font-weight: normal;
}

h1 a {
  text-decoration: none;
  color: black;
  font-size: 1em;
}

.nav {
  display: flex;
  justify-content: center;
}

.nav nav {
  width: 90%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

＆＃13;

<div class="nav">
  <nav>
    <div>
      <h1><a href="index.html">workout</a></h1>
    </div>
    <span>
      <a id='home' href="index.html">index</a>
      <a id='work' href="pricing.html">pricing</a>
      <a id='contact' href="schedule.html">schedule</a>
    </span>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为此删除.nav div样式。检查下面更新的代码段。

＆＃13;

＆＃13;

h1{
  font-family: sans-serif;
  font-size:2em;
  font-weight:normal;

}
h1 a{
  text-decoration: none;
  color:black;
  font-size: 1em;
}
/*.nav{
  display: flex;
  justify-content: center;

}*/
.nav nav{
  width: 90%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

＆＃13;

<div class="nav">
  <nav>
	<div>
	  <h1><a href="index.html">workout</a></h1>
	</div>
	<span>
	  <a id='home' href="index.html">index</a>
	  <a id='work' href="pricing.html">pricing</a>
	  <a id='contact' href="schedule.html">schedule</a>
	</span>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;