Bootstrap 4 垂直对齐（valign）bootstrap4单元

在其中一个

td

中，我有一个大按钮。这使得行增长到这个高度。我想垂直对齐所有单元格内容，使其居中。但是它不起作用。我在每个

td

上尝试了

valign

属性：

是否要垂直对齐td？没有像将每个td转换为flexbox

class=“d-flex justify content center”

或嵌套表格这样的技巧

建筑
距离
月成本
测向中心
2.2mi
$35
挑选

您可以使用

class=“align middle”

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col" class="border-top-0">Building</th>
            <th scope="col" class="border-top-0">Distance</th>
            <th scope="col" class="border-top-0">Monthly Cost</th>
            <th scope="col" class="border-top-0"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="align-middle">DF Center</td>
            <td class="align-middle">2.2mi</td>
            <td class="align-middle">$35</td>
            <td class="text-right align-middle">
                <button type="button" class="btn btn-secondary btn-lg">Select</button>
            </td>
        </tr>
    </tbody>
</table>

---

试试这个boostrap类：class=“align middle”哇，谢谢！成功了！！为什么

valign

不受尊重？只是好奇是什么打破了它。（上面说我必须等7分钟才能接受答案，我会马上接受）有什么把戏可以让整个栏目居中吗？或者我必须在每个

td

和每个

th

中添加

text center

？谢谢@Zim！我没有意识到我们必须突破到样式表！非常好的学习，谢谢。

.table thead th,
.table tbody td {
    text-align: center;
}