<th align'"center"> 不在引导表上工作。可能是什么原因？答案

【问题标题】：<th align'"center"> not working on a bootstrap table. What might be the reason?<th align'"center"> 不在引导表上工作。可能是什么原因？
【发布时间】：2021-09-24 02:25:15
【问题描述】：

我有一个引导悬停表，我正在尝试使用 <th align="center"> 将列标题与中间对齐。这似乎对桌子没有任何影响，但<td align="center"> 工作正常。

这是我的代码：

<table class="table table-hover">
    <thead>
    <tr>
        <th>Title</th>
        <th>Score</th>
        <th align="center">Product</th>    #This line is not working
        <th>Who Reviewed</th>
        <th>When</th>
    </tr>
    </thead>
    <tbody>
    {% for review in object_list %}
        <tr>
            <td><a href="{% url 'backend_reviews_edit' review.pk %}">{{review.title}}</a></td>
            <td align="center">{{ review.score }}</td>
            <td align="center">{{ review.product.title }}</td>
            <td>{{ review.reviewer_name}}</td>
            <td>{{ review.date_created|date:"m-d-Y" }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
    </div>

【问题讨论】：

对齐应该由 CSS 处理，而不是 HTML。

标签： html twitter-bootstrap

【解决方案1】：

如果您使用的是引导程序，请使用其 CSS 规则。

<th class="text-center">Product</th>

【讨论】：

是的，确实如此，但我也应该将它用于，因为它似乎在没有类的情况下也能工作
正如我所提到的，对齐（和所有其他表示）不应该用 HTML 来完成，而应该用 CSS 来完成。 align 已弃用。
要使其同时应用于 th 或 td....只需将其应用于 tr。每行里面的内容都会继承该属性。

【解决方案2】：

使用这个

<th class="text-center">Product</th>

属性对齐不起作用，因为在引导样式表上找到这个：

th {
    text-align:left
}

【讨论】：

【解决方案3】：

或者这个可以试一试。

&lt;th style="text-align:center"&gt;Product&lt;/th&gt;

【讨论】：

谢谢。这正是我想要的！

【解决方案4】：

如果以上都不行，可以试试

style="text-align:center !important"

我在 Vuetify 表中中心对齐时遇到了同样的问题，并且解决了它。

【讨论】：