垂直对齐内联元素中的文本

Question

问题

所以我正在创建一个包含div a个<div id="tabcontent-container"> <div class="tabcontent-menu"> <a href="#">WLAN Jumpstart</a> <a href="#">Mobility</a> <a href="#">Guest Access Jumpstart</a> </div> </div> 标签的简单导航菜单。目前它看起来像这样：

以下是我的HTML和CSS：

HTML

#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }

CSS

a

Jsfiddle.net

上的工作示例

问题

我想知道是否有一种更简单的方法可以将中间的“Mobility”{{1}}标记与中间对齐。其他两个链接看起来很好，因为它们是双线的。我故意把它们弄成双线，原因是现在只需要中间一对中间对齐一些如何。

有什么建议吗？

Answer 1

您可以使用vertical-align: middle垂直调整位置。由于这仅适用于表格单元格，因此请为display: table-cell

设置.tabcontent-menu a

http://jsfiddle.net/H9VHs/8/

Answer 2

我通常通过改变line-height来完成这样的事情。

.tabcontent-menu a.midline {
 line-height: 64px;   
}

请在此处查看：http://jsfiddle.net/PZVnq/

文档/进一步阅读

MDL上的
• CSS line-height - https://developer.mozilla.org/en/CSS/line-height
• 使用CSS进行垂直居中的Lauri Raittilan - http://www.student.oulu.fi/~laurirai/www/css/middle/
• 使用CSS在vanseodesign.com上进行垂直居中 - http://www.vanseodesign.com/css/vertical-centering/