Вертикальное выравнивание (valign) ячеек bootstrap4

Question

В одном из td у меня есть большая кнопка. Что заставляет ряд расти до этой высоты кнопок. Я хочу выровнять содержимое всех ячеек по вертикали. Однако это не работает. Я пробовал атрибут valign на каждом 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;
}