text-center class will not be applied

Question

I have a span tag with some text inside.

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

The problem is that only text-primary class will be applied.Any ideas? I have no css overiding those classes

Answer 1

See my fiddle which will show you the problem using 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;
}

Explanation:

De display property of a span is default inline , if you change it to block then it will work.

Answer 2

text-center won't do anything on an inline element like <span> . If you want text to be centered, put it in a block element like <p> .

Example:

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

Answer 3

Inheritance is causing your issue. You need to over-ride it like the following

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

This allows the .text-center properties to be applied as well. Notice there is no space between the two classes in the definition, that essentially means AND instead of a child element.

Another note a span is not a block level element. You probably need to add display:inline-block to your definition

Answer 4

Text-align applies ONLY to block elements not to inline elements so if you want to use a span with text-align center you have to change its display:

span{
display:block;
}

or use a block element(p for example) For more information have a look here: http://www.w3.org/TR/css3-text/#text-align-property