文本中心類將不適用

Question

我有一個span標簽，里面有一些文本。

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

問題在於僅將應用文本基類。 我沒有覆蓋這些課程的CSS

Answer 1

請參閱我的小提琴，它將使用span顯示問題：

http://jsfiddle.net/VDesign/zs03d7kh/

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>類的塊元素中。

例：

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

Answer 3

繼承引起您的問題。 您需要像下面這樣重寫它

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

這也允許應用.text-center屬性。 請注意，定義中兩個類之間沒有空格，從本質上講，它表示“與”而不是子元素。

另一個注意， span不是塊級元素。 您可能需要在您的定義中添加display:inline-block

Answer 4

文本對齊僅適用於塊元素，而不適用於內聯元素，因此，如果要使用具有文本對齊中心的范圍，則必須更改其顯示：

span{
display:block;
}

或使用塊元素（例如p）有關更多信息， 請參見此處： http : //www.w3.org/TR/css3-text/#text-align-property