html - 样式导航 CSS 边距

Question

我无法在动态导航按钮上居中对齐文本（水平和垂直）。按钮设置了 with 和 height ，使按钮具有单行或双行文本。如果有单行或双行文本，我希望文本中心对齐。

有什么简单的 CSS 解决方案可以解决这个问题吗？
是的，我已经"top-margin"手动设置了双行文本按钮的样式（请参见下面的 css 声明），

#access li#menu-item-21 a { 
 margin-top:3px; line-height:1.2em; height:27px;
}

但是我不想在带有 2 行文本的按钮上设置特定的 css 声明。我想为所有按钮设置相同的#access 样式。这可以实现这种外观吗？

链接到我的页面 [链接] http://djbaba.se/navTest/

应该是解决这个问题的更好方法。

score 0 · Accepted Answer

一种方法是使用absolute定位并设置top为 50%。然后将负上边距设置为元素高度的一半。

例子

#access li#menu-item-21 a {
     line-height: 1.2;
     position: absolute;
     top: 50%;
     margin-top: -12px; // half the height of the anchor
}

更新

您可以尝试使用display: table-cell.

例子

a{
    display: table-cell;
    vertical-align: middle;
    height: 38px;
    line-height: 1.2;
}