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

Question

目标

我想要实现的是让我的<nav>s 链接居中（垂直和水平），我的<nav>s 链接有一个可以包含文本的定义的液体宽度，我的<nav> 元素是液体并扩展以满足<li>s 的需求。

尝试

我在固定导航栏中将<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;
}

如果我了解您想要的内容，那应该将其全部集中在一行中。

Answer 2

如果我理解正确，您主要关心的是垂直和水平居中。我在 CodePen 上添加了一些颜色用于演示目的，它产生了这个

要使文本垂直居中，只需将<li> 的line-height 设置为等于<ul> 的高度，并使包含的<nav> 具有height: auto;。但不要为此使用表格。

然后将你的文本水平居中给你的<li> 一个text-align: center; 的规则来居中。

这里是一个例子，根据自己的需要修改

#page-nav {
  /* you can set the height of container to auto */
  height: auto;
  width: 20%;
  margin-right: 5%;
  float: right;
}

#page-nav ul {
  /* modify to your height */
  height: 2em;
  width: 100%;
  margin: 0%;
  padding: 0%;
  text-transform: uppercase;
  font-size: 125%;
  color: #4a4a4a;
  white-space: nowrap;
}

#page-nav li {
  height: 100%;
  padding: 0% 2%;
  /* use inline-block instead */
  display: inline-block;
  /* set line height equal to its parents height */
  line-height: 2em;
  /* Center your text inside the li */
  text-align: center;
  vertical-align: middle;
}