Question

我试图通过使用bootstrap＆＃34; text-center＆＃34;来对齐文本。类。我已将该课程应用于相关元素，但未正确呈现。

我的元素定义如下：

-1,0,1

＆＃34;直列面板＆＃34;除了应用<div class="content-panel inline-panel text-center"> Some text </div>

之外什么都不做

据我所知，因为＆＃34;文本中心＆＃34;正在最后应用并且所有样式都通过类名应用（因此没有特殊性问题），所有样式都包含在＆＃34;文本中心＆＃34; class应该覆盖任何以前的样式。

在这种情况下，班级＆＃34;内容面板＆＃34;包含display: inline-block;，但＆＃34;文本中心＆＃34; class不会覆盖它。

我检查确定，但我没有在任何地方使用text-align: left;声明。

我错过了什么吗？

Answer 1

如果CSS文件本身只是一个类，它就会脱离CSS文件中的顺序。

例如，首先使用文本中心的那个将不会应用它：

.text-center {
text-align: center;
}

.content-panel {
text-align: left;
}

<div class="content-panel inline-panel text-center">
    Some text
</div>

而这个因为它是CSS顺序中的最后一个：

.content-panel {
text-align: left;
}

.text-center {
text-align: center;
}

<div class="content-panel inline-panel text-center">
    Some text
</div>

您可以尝试的一件事是增加CSS的特异性，因此.text-center会变成类似.content-panel.text-center的东西，它应该覆盖左对齐。