html - 样式导航 css 边距

Question

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

有什么简单的 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/

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

http://awesomescreenshot.com/0081s4rc8b

Answer 1

一种方法是使用绝对 定位并将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;
}