使用无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;
}​

看起来如何（左图：正常|右图：HOVER）：

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

Answer 1

position: absolute不会与display: table-cell混在一起。删除它和display: block规则中的:hover即可。 Fiddle

Answer 2

将元素的line-height设置为等于height，即：line-height: 240px;

编辑以获得多行支持，将span置于锚标记内，使用display table-cell; height: 100%; vertical-align: middle;设置样式，并使用{{1}设置包含锚标记的样式}，如图here所示。

Answer 3

尝试查看这篇文章。我认为如果你愿意改变你的代码会有所帮助。没有它我认为这是不可能的，除非你使用像jquery这样的东西。 Here's the link to the article 希望它有所帮助！

编辑：只是为了帮助你一点点：改变一个{position：absolute;到{display：table-cell;并删除行a：hover {display：block}