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

Question

问题

所以我正在创建一个简单的导航菜单，其中包含 a 标签的 div。目前它看起来像这样:

以下是我的 HTML 和 CSS:

HTML

<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>

CSS

#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; }

关于 Jsfiddle.net 的工作示例

问题

我想知道是否有更简单的方法将中间的“Mobility”a 标记对齐到中间。其他两个链接看起来不错，因为它们是双线的。我出于某种原因故意将它们设为双线，现在只需要中间的一条以某种方式居中对齐。

有什么建议吗？

Answer 1

您可以使用vertical-align: middle 来垂直调整位置。由于这仅适用于表格单元格，因此为 .tabcontent-menu a

设置 display: table-cell

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