Question

我有一个带有一些文字的span标签。

<span class="text-primary text-center"> You can try your own values in the following form: </span>

问题是只会应用text-primary class。任何想法？我没有css覆盖这些类

Answer 1

请看我的小提琴，它将使用span显示问题：

<强> HTML

<span class="text-primary text-center">Test</span>
<p class="text-primary text-center">Test</p>

<强> CSS

span {
    background: #ff0000;
}

p {
    background: #00ff00;
}

<强>解释

范围的显示属性是默认inline，如果您将其更改为block，那么它将起作用。

Answer 2

text-center无法对<span>等内联元素执行任何操作。如果您希望文本居中，请将其放在像<p>这样的块元素中。

示例：

＆＃13;

<span style="text-align:center;">Inline centered text</span>
<p style="text-align:center;">Block centered text</p>

＆＃13;

Answer 3

继承导致您的问题。你需要像以下一样覆盖它

.text-primary.text-center { text-align:center }

这样也可以应用.text-center属性。请注意，定义中的两个类之间没有空格，这实际上意味着AND而不是子元素。

另一个注意事项span不是块级元素。您可能需要在定义中添加display:inline-block

Answer 4

文本对齐仅适用于阻止元素而不是内联元素，因此如果要使用带有文本对齐中心的范围，则必须更改其显示：

span{
display:block;
}

或使用块元素（例如p）有关更多信息，请查看此处： http://www.w3.org/TR/css3-text/#text-align-property