Question

在一个td中，我有一个大按钮。这会使行增长到此按钮的高度。我想垂直对齐所有单元格内容为中间。但是，它不起作用。我在每个valign上尝试了td属性：

是否要垂直对齐TD？没有把每个td转换为flexbox class="d-flex justify-content-center"或嵌套表的技巧吗？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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 valign="middle">DF Center</td>
            <td valign="middle">2.2mi</td>
            <td valign="middle">$35</td>
            <td class="text-right" valign="middle"><button type="button" class="btn btn-secondary btn-lg">Select</button></td>
        </tr>
    </tbody>
</table>

Answer 1

可以使用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>

https://www.codeply.com/go/oRuZLixu1L

将所有头部和身体细胞水平居中。

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

垂直对齐（valign）bootstrap4单元格

1 个答案: