CSS文本定位 - 在标记的圈子背景

Question

我创建了一个圆圈的导航，我需要将每个链接的文本放到中心，如果只有一个单词，我可以用行高来做这个，但是大多数都有一个以上字。

我怎样才能让它发挥作用？

示例：http://jsfiddle.net/elogicmedia/nVPYQ/12/

显示我在说什么的图像。请参阅文本全部位于每个链接的顶部。

我的CSS代码

nav {
    position: relative;
top: 200px;
left: 200px;
    font-family: helvetica, arial;
}
li {
list-style: none;
}
a {
position: absolute;
text-decoration: none;
width:98px;
height:98px;
border-radius:50%;
line-height:1.5em;
text-align:center;
    font-family: helvetica, arial;
    background-color: #C0D9D9;
}
a:link, a:visited {
    color: #000;
    font-size: 12px;
}
a:hover {
   color: red;
}

Answer 1

您可以通过将其包裹在跨度中来计算每个a的高度和文本本身的高度。在跨度上使用position: relative，并根据计算将top设置为适当的中间点。

http://jsfiddle.net/ExplosionPIlls/nVPYQ/13/