表格单元格中流体导航栏中的垂直和水平对齐方式

Objective

What I am trying to achieve is have my <nav>s links be centered (vertically and horizontally), my <nav>s links have a defined liquid width that can contain the text, and my <nav> element be liquid and expand to fit the needs of the <li>s.

我想要实现的是将

的链接置于中心(垂直和水平),我的

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

元素是液体并扩展为符合

的需要。

Attempts

I vertically centered my <li>s within my fixed navbar, but now the text is overflowing from the cells and I want the cells to expand to fit the text within.

我在我的固定导航栏中垂直居中我的

,但现在文本从单元格溢出,我希望单元格扩展以适应其中的文本。

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

2 个解决方案

#1

try changing your #pagenav CSS:

尝试更改#pagenav CSS:

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

If i am understanding what you want that should center it all on itself in a row.

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

#2

If I understand you correctly, your main concern is to center vertically and horizontally. I added some color for demo purposes on this CodePen which produced this

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

To center your text vertically just set the line-height of your <li> equal to the height of your <ul> and make the containing <nav> to have a height: auto;. But do not use a table for this.

要使文本垂直居中,只需将

的行高设置为等于

的高度,并使包含
的高度为:auto;。但是不要为此使用表格。

的行高设置为等于的高度,并使包含的高度为:auto;。是是不要为此使用表格。

Then center your text horizontally give your <li> a rule of text-align: center; to center it.

然后水平居中你的文字给你的

规则text-align:center;以它为中心。

Here is an example, modify according to your own needs

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

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