Html <；李>；在表格单元格中的流体导航栏中 客观的

我试图实现的是使我的

s链接居中（垂直和水平），我的

s链接具有定义的液体宽度，可以包含文本，并且我的

元素是液体并扩展以适应

的需要

尝试 我将我的

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

HTML 尝试更改您的

#pagenav

CSS：

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

---

如果我理解你想要什么，那就应该把它放在一行的中心

如果我理解正确，您主要关心的是垂直和水平居中。我为演示添加了一些颜色，制作了这个

要垂直居中文本，只需将

的

行高设置为等于
的高度，并使包含的
具有
高度：自动。但是不要用桌子来做这个

然后将文本水平居中，给
一个
文本对齐规则：居中以使其居中

下面是一个例子，根据您自己的需要进行修改

#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;
}

我试过了，无序的列表移到了下面的一行，列表项分散在整行之间，谢谢你的帮助@克里斯蒂娜，我想你是想把这些作为对问题的评论。不是我的答案？谢谢你的时间和回复，很抱歉我没有早点回复。我现在正在尝试，并会让你知道如何锻炼！再次感谢！是的，这正是我的意思，我注意到我对代码“宽度：20%”犯了一些小错误不应该出现在页面导航中，抱歉这是我的实验代码。对不起，没有早点回来！我还想为缺少某些细节而道歉，我想再次感谢您的时间和帮助！我通过JS听说过，但我从来没有这样做过。你应该尽量避免使用ID进行样式设置，因为你创建了选择器专用性战争。不过，IDs非常适合使用JS和jQuery进行选择。
#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;
}