How can I make a center-aligned text's with to be just the text's width?

Question

Wondering how I can make centered text's width the width of the text? Highlighted in red, it shows that the width is 100%.

http://jsfiddle.net/kenhimself/ktkdypyo/

CSS:

h1 {
    text-align: center;
    font-size: 5vh;
    line-height: 1;
    white-space: nowrap;
    background:red;
    color:white;
}

Thanks in advance!

Answer 1

Change your HTML structure like below and apply style for h2 as well.

  <div style="text-align:center"><h1>text is centered</h1><br />
   <h1>but the width is 100%.</h1><br/>
   <h1>How can I make it so that the width</h1><br />
   <h1>is only the widht of the text?</h1>
  </div>

CSS

h1 {
font-size: 5vh;
line-height: 1;
white-space: nowrap;
background:red;
color:white;    
display:inline-block;
}

DEMO