html - 当按钮改变同一 <tr> 中的填充时，如何使 <td> 居中？

Question

我正在使用 JSP 创建一个 HTML 表格，并且样式使用的是 Bootstrap。我有两列，一列带有按钮，另一列带有文本。

它们都旨在在表格中具有相同的填充，12px 顶部和底部。按钮列的顶部和底部都有填充，但文本部分没有。

我认为发生的事情是第二列的顶部填充按照预期的方式设置，然后填充的其余部分只是填充。我有两张图片和下面的代码。

第一个图像显示按钮周围的填充，第二个图像显示文本周围的填充。

<tbody>
    <c:forEach items="${results.items}" var="result">
        <tr>
            <td>
                <form action method="post" accept-charset="UTF-8">
                    <div hidden>
                        <input name="itemUri" value="${result.uri}">
                    </div>
                    <div class="buttons">
                        <input class="btn btn-info"  type="submit" value="See">
                    </div>
                </form>
            </td>
            <td>
                <span class="align-middle v-100">Green Eggs and Ham</span>
            </td>
        </tr>
    </c:forEach>
</tbody>

Answer 1

这不会改变内边距，但按钮的内边距是可以的，因此您可以只调整文本的居中。

Bootstrap 添加 vertical-align: top 到 td。您可以使用

进行调整

vertical-align: inherit
or
vertical-align: middle

文本可能仍未垂直居中显示，但它与按钮的文本对齐。我认为这会成为按钮的填充和/或行高的问题。