问题
因此,我正在创建一个简单的导航菜单,其中包含div
标签的a
。当前看起来像这样:
以下是我的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
标记与中间对齐。其他两个链接看起来不错,因为它们是双线。我故意使它们成为双行是有原因的,现在只需要中间一个到中间对齐一些方式即可。有什么建议么?
最佳答案
您可以使用vertical-align: middle
垂直调整位置。由于这仅适用于表格单元格,因此请将display: table-cell
设置为.tabcontent-menu a
http://jsfiddle.net/H9VHs/8/