无法使超链接在导航标签的中心垂直对齐。

Question

我已经实现了这种导航条。我的问题是，无论我如何调整样式的导航和超链接，我不能使文本垂直中心，链接总是显示在超链接框的顶部。vertical-alignment: middle应该是解决方案，但是什么都不会发生，结果也一样。

PS:我高估了导航条的长度，指出了样式的错误行为。

​

* {
  padding: 0;
  margin: auto;
  font-family: verdana;
}
nav {
  display: flex;
  position: fixed;
  width: 100%;
  height: 60%;
  top: 50%;
  text-align: center;
  background-color: blue;
  display: space-around;
  z-index: 1;
}
nav a {
  float: left;
  width: 20%;
  height: 100%;
  background-color: blue;
  color: white;
  vertical-align: text-bottom;
  font-weight: bold;
  vertical-align: middle;
  font-size: 200%;
  text-align: center;
}
nav a:hover {
  -webkit-animation: selectanim 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation: selectanim 0.5s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}
@keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}

<nav>
  <a>1 link</a>
  <a>2 link</a>
  <a>3 link</a>
  <a>4 link</a>
</nav>

​

Answer 1

你走在正确的轨道上。垂直对齐:中间是您所需要的，但是只有当您的元素是表格单元格时，它才能工作。因此，使用css，您可以将显示设置为“表单元格”，删除"float:left“，并将父(nav)设置为类似于表的行为，它应该可以工作：

nav {
   display: table
}

nav a {
   display:table-cell;
   vertical-align:middle;
}

这是给你的小提琴。请注意，我已经删除部分css，以保持答案干净。希望这有帮助

Answer 2

我将向html中的"a“标记添加一个CSS类，如下所示：

<a class="vert" onclick="showArticle('...')">1 link</a>

其中，用于.vert的CSS为：

.vert {
 padding-top: 15%;
}

你可以玩这个填充百分比，并调整它以更好地适合你的网站，或使它成为一个固定的价值.由你决定。

链接到JSFIDDLE

试试看。只是让你对"a“元素有了更多的控制。

Answer 3

由于您已经在使用柔性盒，您可以将链接转到柔性容器。

通过这种方式，您可以使用align-items: center垂直对其内容进行中心设置：

nav > a {
    display: flex;
    align-items: center;
    justify-content: center; /* Instead of text-align: center */
}

​

* {
  padding: 0;
  margin: auto;
  font-family: verdana;
}
nav {
  display: flex;
  position: fixed;
  width: 100%;
  height: 60%;
  top: 50%;
  background-color: blue;
}
nav > a {
  flex-grow: 1;
  height: 100%;
  color: white;
  font-weight: bold;
  font-size: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav a:hover {
  -webkit-animation: selectanim 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation: selectanim 0.5s;
  animation-fill-mode: forwards;
}
@-webkit-keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}
@keyframes selectanim {
  from {
    background-color: blue;
  }
  to {
    background-color: purple;
  }
}

<nav>
  <a>1 link</a>
  <a>2 link</a>
  <a>3 link</a>
  <a>4 link</a>
</nav>

​