0

我有两个模块：

一个.master-header和一个.header-nav

在.header-nav里面.master-header并且是一个简单的导航：

<nav class="header-nav">
          <ul>
            <li class="active">
              <a href="/home">Home</a>
            </li>
            <li class="">
              <a href="/here">Item</a>
            </li>
            <li class="">
              <a href="/photos">Photos</a>
            </li>
            <li class="">
              <a href="/here">Item</a>
            </li>
          </ul>
        </nav>

在我的.header-nav模块中，我height将a,li和ul设置为 100%，然后将 的 设置height为.header-nav来自100px内部，.master-header因为从逻辑上讲，它的子项的布局样式应该属于哪里是正确的。

现在，问题来了，因为我希望将文本垂直居中a。行高非常适合这个，但 100% 不起作用，因为 100% 是字体的高度。line-height: 100px是用来解决问题的完美方法，但将其放入.header-nav模块中似乎是错误的，因为这表明 ALL.header-nav应该是这样的。我宁愿说 50% 之类的东西，但我不能这样做padding-top: 50%，因为这是基于项目的宽度。

有什么想法吗？

尼尔

4

1 回答 1

-1

您可以使用 display: table-cell 来实现垂直对齐。

.header-nav {height: 100px}

.header-nav ul,
.header-nav li {height: 100%}

.header-nav ul {display: table;}
.header-nav li {display: table-cell; vertical-align: middle}

查看这个 plunker 的工作版本

于 2013-11-13T10:15:24.627 回答