造型导航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

一种方法是使用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;
}