如何将table标签thead内的文本设置为水平和垂直方向居中对齐

你当前使用的是Bootstrap框架的表格组件，可通过以下两种方式实现需求： #

方案1：使用Bootstrap内置工具类（无额外CSS，推荐） #

直接给<thead>内的每个<th>标签添加text-center（控制水平居中）和align-middle（控制垂直居中）工具类即可，修改后的表格代码如下：

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

方案2：自定义CSS规则（统一生效，无需逐个加类） #

如果不想修改HTML结构，可以在全局样式表中添加如下CSS规则，会自动作用于当前ID为stanari的表格的所有表头：

#stanari thead th {
  /* 水平居中 */
  text-align: center;
  /* 垂直居中，th为table-cell类型元素，该属性直接生效 */
  vertical-align: middle;
}

如果样式被Bootstrap默认规则覆盖不生效，可以提升选择器优先级，或者在属性值后加!important强制生效。 #

原问题参考截图 #

内容的提问来源于stack exchange，提问作者Stefan Momcilovic