Css 坚持模块化风格

我有两个模块：

A.主收割台和A.收割台导航

.header导航位于.master报头内部，是一个简单的导航：

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

在my.header nav模块中，我将a、li和ul的高度设置为100%，然后将.header nav的高度从.master header中设置为100px，因为这在逻辑上正确地说明了其子项的布局样式应属于何处

现在，问题来了，因为我希望在a的垂直中心文本。行高是完美的，但100%不起作用，因为100%是字体的高度。行高：100px是解决问题的最佳选择，但将其放入.header导航模块似乎是错误的，因为这表明所有.header导航都应该是这样。我更希望它说50%，但我不能做填充顶部：50%，因为这是基于项目的宽度

有什么想法吗

---

Neil

您可以使用display:table单元格来实现垂直对齐

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

---

请提供一个JSFIDLE，这样那些愿意帮助您的人就有了比标记更多的东西可以使用了！不仅如此，还不清楚你想要实现什么。这是好的，直到完美的事情-你的意思是你想要类似的东西-但后来它变得混乱了。如果我猜对了，解决方案是除了px和%。他们呢？在我的示例中，头部导航高度为6em，因此其中一半为3em。这样行吗？或者，正如您所指出的，有更多的元素具有类标题nav，而您的问题是您想要选择这个特定的元素？那样的话，就再给它上一节课吧。您可以在class属性中为元素提供任意多的类：class=header nav是的，这一个我没有做JSFIDLE，因为这不是一种编程问题，更多的是我应该把它放在哪里？问题行高：100px可以解决我的问题，但我必须将该行放在我的.header导航模块中，根据BEM模块方法，这似乎不是正确的位置。除了CSS属性外，最好避免使用标记选择器，因为它们会降低页面性能，使未来的支持更加困难。这里有更多信息，Yandex在其网站和不同的服务上使用bem中的标签选择器。请您解释一下为什么在您的主页上使用.b-center.b-tabs td选择器？我不确定提到了谁的主页。如果是我的，我可以解释一下是否有链接。实际上，边界元的CSS部分的目的是提供独立的块组件，这只有在避免使用标记选择器的情况下才可能实现。你可以在这里找到解释