【发布时间】：2013-11-07 18:25:28
【问题描述】：
我有两个模块：
.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 和ul 的height 设置为100%，然后将.header-nav 的height 设置为100px在.master-header 中，因为从逻辑上讲，它的子项的布局样式应该属于哪里。
现在，问题来了，因为我希望将 a 中的文本垂直居中。行高非常适合这个，但 100% 不起作用，因为 100% 是字体的高度。 line-height: 100px 是解决问题的最佳选择，但将其放在 .header-nav 模块中似乎是错误的，因为这表明所有 .header-nav 都应该是这样的。我更希望它说 50% 但我不能这样做 padding-top: 50% 因为那是基于项目的宽度。
有什么想法吗？
尼尔
【问题讨论】：
-
请提供一个 jsfiddle，以便那些愿意帮助您的人拥有比标记更多的东西来玩！
-
不仅如此，还不清楚你想要实现什么。 “完美的东西”没问题 - 你的意思是你想要像 this fiddle 这样的东西 - 但后来它变得混乱了。
-
如果我没猜错的话，解决方案是除了
px和%之外还有其他单位。em怎么样？在我的例子中，header-nav 是 6em 高，所以其中一半是 3em。这行得通吗？ -
或者，正如您似乎指出的那样，
header-nav类的元素更多，您的问题是您想挑选出这个特定的元素吗？在这种情况下，只需再给它上课。您可以在 class 属性中为元素提供任意数量的类：class="header-nav yes-this-one" -
我没有做 jsfiddle，因为它不是一种编程问题，更多的是“我在哪里放置这个？”问题。 line-height: 100px 可以解决我的问题，但我必须将该行放在我的 .header-nav 模块中，根据 BEM 模块方法，这似乎不是正确的位置。