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

Question

目标

我想要实现的是将<nav>个链接置于中心（垂直和水平），我的<nav>链接具有可以包含文本的已定义液体宽度，以及我的{{ 1}}元素是流动的并且扩展以适应<nav>的需要。

尝试

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

HTML

<li>

CSS

<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>

Answer 1

尝试更改#pagenav CSS：

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

如果我理解你想要的东西，应该把它全部集中在一起。

Answer 2

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

要将文字垂直居中，只需将line-height的{​​{1}}设置为等于<li>的高度，然后将包含<ul>的{​​{1}}设为<nav> }。但是不要使用表格。

然后将文字水平居中，让height: auto;规则为<li>，使其居中。

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

text-align: center;