html - <li> 在表格单元格中的流体导航栏中的垂直和水平对齐方式

Question

目标

我想要实现的是拥有我的 <nav> s 链接居中(垂直和水平)，我的 <nav> s 链接具有定义的液体宽度，可以包含文本，而我的 <nav>元素是流动的并扩展以满足 <li> 的需要秒。

尝试

我将 <li> 垂直居中s 在我的固定导航栏中，但现在文本从单元格中溢出，我希望单元格扩展以适合其中的文本。

HTML

<nav id="page-nav">
  <ul>
    <li>
      <a href="#about-us">About Us</a></li>
    <li>
      <a href="#connect">Connect</a>
    </li>
    <li>
      <a href="http://example.org/" target="_blank">Blog</a>
    </li>    
  </ul>
</nav>

CSS

#page-nav {
  height: 100%;
  margin-right: 5%;
  float: right;
}

#page-nav ul {
  height: 100%;
  width: 100%;
  margin: 0%;
  padding: 0%;
  display: table;
  text-transform: uppercase;
  font-size: 125%;
  color: #4a4a4a;
  white-space: nowrap;
}

#page-nav li {
  height: 100%;
  padding: 0% 2%;
  display: table-cell;
  vertical-align: middle;
}

#page-nav a {
  transition: 0.2s ease;
}

#page-nav a:hover {
  color: #fff;
}

Answer 1

尝试更改您的 #pagenav CSS:

#page-nav {
  text-align: center !important;
  height: 100%;
  float: none;
}

如果我理解你想要什么，那么应该将它全部集中在一行中。