How can I make a fieldset legend-style "background line" on heading text?

See: http://jsfiddle.net/thirtydot/jm4VQ/

If the text needs to wrap, this won't work. In IE7, there will be no line.

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

Edit:

<h2><strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike>Your Text Here<strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike></h2>

Here's how you can do it with a few simple tags and non-breaking spaces.

I'd use an image and call it a day, but this seemed to work for me:

CSS

  fieldset {
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    width: 200px;
  }
  legend {
    margin: 0 25%;
  }

HTML

<fieldset>
  <legend>My Text Here</legend>
</fieldset>

That's the only way I could figure out how to do it with css. Note the width is fixed. Once again I wouldn't do this myself.

CSS Cat Does Not Approve