css - 不使用 div 垂直对齐文本

Question

我已经尝试解决这个问题很长一段时间了，它似乎非常接近工作，但它不会垂直对齐。我已经尝试了大部分解决方案，同时返回到相同的表格单元格答案。它在这里不起作用，文本在顶部对齐。有谁知道为什么这不起作用，以及解决方法？

jsfiddle:

http://jsfiddle.net/JyvbJ/

HTML:

<a href="#">Open Up</a>​

CSS:

a {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;
    border-radius: 120px;
    -moz-border-radius: 120px;
    -webkit-border-radius: 120px;
    -khtml-border-radius: 120px;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
}

a:hover {
    color: #000;
    text-decoration: none;
    background-color: rgba(0,0,0,0.8);
    opacity: 1;
    display: block;
}​

外观(左:正常 | 右:悬停):

P.S 我不能有任何 div，因为我希望整个圆圈都可以作为链接点击。谢谢

Answer 1

position: absolute 不与 display: table-cell 混合使用。删除它和 :hover 规则中的 display: block 即可。 Fiddle