How to focus inline-block / floated header without additional markup?

Question

I have a variable-width header that should have a background color as wide as the text (no wider). The only way I can do this (without additional markup) is to set the display to the built-in block or put it to the left. The problem then is that I cannot center the header (another requirement).

The closest thing I have so far is to set position: relative; on the floating title by clicking on it 50% on the left and then pulling it back 25% with a negative margin, however this does not always center the title. It must remain in the document stream, therefore position: absolute; - this is another no-go.

If you know a way to do this with CSS with just no extra markup , please let me know (the pseudo elements are fine, I don't care about IE7 support)!

Answer 1

It was decided to use display: table; in the header (with field: 0 auto;).

Answer 2

you can give text-align:center; body as a global arrtibute and give display:inline-block your header div. So, it centers your dynamic width in center as follows:

CSS

 body{margin:0; padding:0;text-align:center} p{text-align:left;} .header{background:red;display:inline-block;} 

In this example, http://jsfiddle.net/vpcXS/

Answer 3

replace p tag with center since my markup

 <div id="header"> <center>hello</center> </div> 

and CSS

 body{ width:100%; } #header{ text-align:center; } #header center{ display:inline-block; background:red; }