“垂直对齐：中间；”在 td 内不起作用答案

【问题标题】："vertical-align:middle;" is not working inside td“垂直对齐：中间；”在 td 内不起作用
【发布时间】：2021-06-12 01:45:56
【问题描述】：

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

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 的，所以我不确定它为什么不起作用。

【问题讨论】：

阅读developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
vertical-align:middle; 不起作用，因为您将锚的类设置为display:inline-block;，这意味着您尝试在“inline-block”中使用vertical-align:middle;，而不是“table-cell”

标签： html css vertical-alignment

【解决方案1】：

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

vertical-align:middle;
display:inherit;

【讨论】：

【解决方案2】：

<td> 内容确实是垂直对齐的。问题是内容是消耗所有可用高度的<a>标签，并且它自己的内容（即<p>段落）没有垂直对齐。

也尝试对齐<a> 标签：

.button {
      display: table-cell;
      vertical-align: middle;
}

【讨论】：

【解决方案3】：

尝试改用此代码。它将按钮类放置在文本（即vertical-align:middle;）上，并使用绝对定位将按钮类定位在表格单元格上。

很抱歉，我目前无法添加 jsfiddle，因为他们遇到了一些问题，但是，如果您复制 - 粘贴下面的代码，您会看到（我相信是）您想要的结果。

HTML

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

CSS

.button {
    background-color: transparent;
    border-radius: 50%;
    border: 5px solid #ff0099;
    height: 175px;
    width: 175px;
    position:absolute;
    top:0px;
    left:0px;
}
td p {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    text-align:center;
    text-decoration:none;
    width:170px;
    margin-left:6px;
}
table {
    border-spacing: 20px 10px;
    border-collapse: separate;
}
td {
    position:relative;
    width:180px;
    height:180px;
    vertical-align:middle;
}

【讨论】：

【解决方案4】：

因为这些解决方案都不适合我，所以我在* 上找到了以下解决方案。据我所知，这在 Bootstrap 4 中也能完美运行。

td {
    display: flex;
    align-items: center;
}

【讨论】：