CODEWITHSUNDEEP
htmlcss
king
king

Reputation: 1344

How come this text isn't being centered?

For some reason this text isn't being centered. 

#highlightheader
{
           background-color:#006600;
           color:white;
           font-size:30px;
           text-align:center; 
           font-weight:bold;
 }​


​<span id="highlightheader">example text</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

http://tinkerbin.com/eoJprUq5 (jfiddle going too slow, used this one instead)

EDIT: i ONLY want the text to be highlighted, not have a whole green bar across.

Upvotes: 0

Views: 96

Answers (7)

WolvDev
WolvDev

Reputation: 3226

Because you use SPAN and span is an inline element. Use display:block in CSS or better p-tag <p> or div with width:100% to center your text.

Edit:

#highlightheader {
    text-align:center;
}

#highlightheader span { 
    background-color:#006600; 
    color:white; 
    font-size:30px; 
    text-align:center;  
    font-weight:bold; 
}

<p id="highlightheader"><span>example text</span>​</p>​

Upvotes: 2

vivek salve
vivek salve

Reputation: 991

Hi there try to use this with your css

padding:0px 50px 0px 50px;

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Add a display: block; to the #highlightheader. <span> is an inline element!

Upvotes: 2

Julien Bourdon
Julien Bourdon

Reputation: 1723

You should use a div around the span, especially since you want a heading here. As mentioned in the other answers, span should be used for inline elements. You're using it right for highlighting but positioning should be done through div.

Try that:

div.center{
   text-align:center;
}

#highlightheader
{
           background-color:#006600;
           color:white;
           font-size:30px; 
           font-weight:bold;
 }​

<div class=center>
​<span id="highlightheader">example text</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>

Upvotes: 2

mikegreiling
mikegreiling

Reputation: 1161

a span is an inline element, whereas a block element like <div> would work... alternatively add display: block; to your css.

Upvotes: 2

SRN
SRN

Reputation: 2455

span is an inline tag add display:block to css http://tinkerbin.com/oBgV5mcU

Upvotes: 4

jacktheripper
jacktheripper

Reputation: 14219

Span is an inline element. This means its width will auto fit to the size of its contents. Instead, change the span to a p tag - a block element. Block elements have a default with of 100% of the parent.

You can see a demo here

Upvotes: 1

Related Questions