CSS: Comment faire pour centrer le texte entouré de frontières

Je suis en train de centre le texte qui a une ligne allant à travers l'ensemble de l'arrière-plan. De chaque côté du texte, il y a quelques rembourrage, où vous ne voyez pas la ligne. Je suis perplexe en ce qui concerne un bon css-seule façon d'aller à ce sujet. Voici un jsfiddle qui est évidemment faux, mais c'est un début: http://jsfiddle.net/gtspk/

CSS: Comment faire pour centrer le texte entouré de frontières

HTML

<span class="line">
    <h2>Latest Track</h2>
</span>

CSS

.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center}
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white}

Le problème ici est que je NE veux PAS de spécifier une largeur, parce que je vais être de réutilisation pour les différents en-têtes (avec différentes quantités de texte). Quelle est la meilleure façon d'aller à ce sujet via css?

Mise à JOUR: Voici une façon de le faire, mais inline-block a assez moche prise en charge du navigateur: http://jsfiddle.net/gtspk/3/

InformationsquelleAutor JCHASE11 | 2012-09-14
  1. 6

    Ici vous allez. Dû ajouter un emballage span nécessaire afin que nous puissions définir l'arrière-plan blanc de sorte que la ligne ne frappe pas le texte)

    http://jsfiddle.net/gtspk/9/

    <span class="line">
    <h2><span>Latest Track</span></h2>
</span>​

.line{display:block; margin:25px}
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; }
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;}

    Bon, désolé, mal compris ce que tu voulais dire par remplissage. Fixe.

    InformationsquelleAutor idrumgood