html - "vertical-align:middle;"在 td 中不工作

Question

我不明白。这是一个非常简单的文档，我看不出有任何它不能工作的原因。

CSS:

.button {
    background-color: transparent;
    border-radius: 50%;
    border: 5px solid #ff0099;
    display: table-cell;
    vertical-align: middle;
    height: 175px;
    width: 175px;
    text-decoration:none;
    text-align: center;
    word-wrap: break-word;
}
.button:hover {
    text-decoration: underline;
}
.button p {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
}
table {
    border-spacing: 20px 10px;
    border-collapse: separate;
}
td {
    vertical-align:middle;
}

HTML:

<table>
    <tr>
        <td>
<a href="#" class="button" target="_blank"><p>Insert text here, enough to push it over the edge</p></a>

        </td>
        <td>
<a href="#" class="button" target="_blank"><p>Insert text here, enough to push it over the edge</p></a>

        </td>
    </tr>
</table>

据我所知，vertical-align 是用于 td 的，所以我不确定为什么它不起作用。

Answer 1

将以下代码添加到 button css 中。引用http://jsbin.com/kixewufe/2/查看http://jsbin.com/kixewufe/2/edit?html,css,output查看完整代码。

vertical-align:middle;
display:inherit;