css - 坚持模块化样式

Question

我有两个模块:

一个.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 模块中，我有 a、li 和 的 height >ul 为 100%，然后将 .header-nav 的 height 设置为 100px >.master-header 因为关于它的子项的布局样式应该属于何处在逻辑上是正确的。

现在，问题来了，因为我希望将 a 中的文本垂直居中。行高非常适合此设置，但 100% 不起作用，因为 100% 是字体的高度。 line-height: 100px 是解决问题的最佳选择，但将它放在 .header-nav 模块中似乎是错误的，因为这表明所有 。 header-nav 应该是这样的。我宁愿它说 50% 之类的东西，但我不能做 padding-top: 50% 因为那是基于元素的宽度。

有什么想法吗？

尼尔

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

Check out this plunker for a working version