如何将表格内的文本对齐到水平和垂直居中

Question

我有一个问题，如何将我的文字在广告内对齐以水平和垂直居中

<table id="stanari" class="table table-striped table-bordered w-100 animate__animated animate__fadeIn">
    <thead>
        <tr>
            <th>First name and last name of tenants</th>
            <th>Cell phone of tenants</th>
            <th>Apartment address</th>
            <th>Number at the door of the apartment</th>
            <th>Paid deposit in euros</th>
            <th>Date of tenants registration</th>
            <th>Monthly rent in euros</th>
            <th>Is the monthly rent paid</th>
            <th>Payment date</th>
            <th>For month</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Answer 1

默认情况下，标签应该垂直居中对齐，所以你有一些东西覆盖了我建议你修复的默认行为。

但是，您仍然可以通过 css 解决此问题，如下所示：

th {
 display:flex,
 align-items:center,
}

Answer 2

将引导类align-middle和text-center到th元素。

Bootstrap 垂直对齐也Bootstrap 文本对齐

 th:nth-of-type(1), th:nth-of-type(4), th:nth-of-type(5), th:nth-of-type(8){ min-width: 150px; }

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <table id="stanari" class="table table-striped table-bordered w-100 animate__animated animate__fadeIn"> <thead> <tr> <th class="align-middle text-center">First name and last name of tenants</th> <th class="align-middle text-center">Cell phone of tenants</th> <th class="align-middle text-center">Apartment address</th> <th class="align-middle text-center">Number at the door of the apartment</th> <th class="align-middle text-center">Paid deposit in euros</th> <th class="align-middle text-center">Date of tenants registration</th> <th class="align-middle text-center">Monthly rent in euros</th> <th class="align-middle text-center">Is the monthly rent paid</th> <th class="align-middle text-center">Payment date</th> <th class="align-middle text-center">For month</th> <th class="align-middle text-center"></th> </tr> <tr> <td class="align-middle text-center col-3">John and Jane Doe</td> <td class="align-middle text-center">555-555-5555</td> <td class="align-middle text-center">5555 Someroad streer</td> <td class="align-middle text-center">555</td> <td class="align-middle text-center">1555 Euro</td> <td class="align-middle text-center">5-5-21</td> <td class="align-middle text-center">2555 Euro</td> <td class="align-middle text-center">Paid in full</td> <td class="align-middle text-center">5-1-21</td> <td class="align-middle text-center">May</td> <td class="align-middle text-center">N/A</td> </tr> </thead> <tbody> </tbody> </table>