为什么我的 bootstrap-vue b-table 列标题不在部署中心？答案

【问题标题】：Why do my bootstrap-vue b-table column headers not center in deployment?为什么我的 bootstrap-vue b-table 列标题不在部署中心？
【发布时间】：2020-11-20 17:50:22
【问题描述】：

我有一个带有居中列标题的 b 表。当我在 http://localhost... 本地运行时，标题居中，但不是在部署中。为什么会这样？

我尝试了两种使标题居中的方法。我已经像这样将 text-center 道具添加到 b-table 组件中......

    <b-table
        striped
        hover
        show-empty
        sort-icon-left
        :items="items"
        :fields="fields"
        class="text-center"
      >
    </b-table>

我已在我的自定义 scss 文件中包含此样式规则，我将其导入到 App.vue 的应用程序中

表{ 文本对齐：居中； } 这两种方法在本地都可以正常工作，但是当我部署时，列标题是正确对齐的。

这是浏览器检查工具中我的元素选项卡的截图。

样式选项卡清楚地表明标签选择器中的 text-align:right 规则会覆盖标签选择器中的 text-align:center 规则。

【问题讨论】：

在你的部署中，你能看到你的元素应用了什么
我认为您是在建议我在浏览器的检查选项卡中检查哪些类应用于我的元素。我刚刚为我的问题中的一个列标题添加了 div 的屏幕截图。
这是一个有用的建议。根据您在我的问题中发布的屏幕截图中看到的内容，我认为我必须将 text-align: center 添加到自定义 scss 文件中的选择器中。

标签： vue.js bootstrap-vue text-alignment text-align

【解决方案1】：

text-align 是一个inherited property。

这意味着，当解析一个元素的这个属性时，浏览器会首先查找针对该元素的任何规则。有问题的元素是<th>。
如果浏览器找到任何此类规则，它将应用具有最高选择器特异性的规则或具有相同特异性的规则中的最后一个。

如果不存在这样的规则，则它从具有text-align 指定值的最近父级继承该值。
如果没有祖先有text-align 值，则默认为start，这意味着 left 用于具有direction="ltr" 的文档，right 用于具有direction="rtl" 的文档。

所以，基本上，CSS 是通过 Bootstrap 应用于其中一个祖先的：

.text-center {
  text-align: center !important;
}

...被应用于实际元素的以下规则覆盖：

th { text-align: right }

不管父规则的特殊性（因为它不直接针对元素）。

要覆盖 th 规则，您可以使用：

table.text-center * {
  text-align: center
}

...因为table.text-center * 比th 具有更高的特异性，并且它们都针对元素（<th>）。

显然，如果您只想对<th> 元素应用居中，则应将上述选择器中的* 替换为th。

要回答您关于为什么它会在本地而不是远程工作的问题：您的遥控器有额外的 CSS（在 app.ee70fc50.css 中），它解析了 <th> 元素的 text-align 值，因此忽略父值（而在本地，则继承父值，因为您没有将 CSS 应用于 <th>s)。

【讨论】：