Comment puis-je créer une "ligne d'arrière-plan" de type légende fieldset dans le texte d'en-tête?

Je suis venu avec une rapide, l'image de la solution qui semble fonctionner assez bien dans IE 8+ et les autres navigateurs, alors que normalement dégradants dans IE 6/7:

<h1>CSS 2.1 EXAMPLE</h1>

h1 { position: relative; text-align: center; }
h1:first-line { background-color: white; }
h1:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    height: 1px;
    top: 50%;
    background-color: black;
}

Il vient avec les limitations suivantes:

• Le texte doit correspondre à l'ensemble de la couleur de fond, exactement, sinon, il aura l'air bizarre.
• Si vous voulez tout genre de rembourrage sur le texte, vous devez utiliser des espaces insécables à côté du texte (voir la démo).
• Texte d'en-tête doit toujours être sur une seule ligne (fonctionne mieux si elle est de largeur fixe).

Voici une démo: http://jsfiddle.net/AndyE/3tFQJ/

Voici ce que j'utilise sur un site client: http://jsfiddle.net/TPgE4/

Pour:

• Pas d'images nécessaires - rend instantanément
• Utilise un rembourrage pour le contrôle de l'espace sur les deux côtés de texte
• Texte peut être aligné à gauche/à droite aligné — il suffit d'ajouter, par exemple, margin-left: 8px ou margin-right: 8px sur h2 span définition de style pour rendre bien

Contre:

• Nécessite l'utilisation de tag additionnel comme <span>...</span> intérieur de la balise d'en-tête
• Texte doit tenir sur une seule ligne pour une bonne apparence
• Couleur d'arrière-plan sur <span> élément doit correspondre entourant la couleur d'arrière-plan, donc si vous avez un non-solide image de fond, un dégradé ou un motif qu'il ne correspond pas parfaitement

Avec flexbox être pris en charge par tous les navigateurs récents, et qu'il étant de cinq ans depuis la IE8 exigence a été mentionné par l'auteur, j'ai voulu amuser la construction d'une nouvelle solution à l'aide que.

Une variété d'exemples de plus en plus complexes:

https://jsfiddle.net/0mL79b4h/1/

https://jsfiddle.net/0mL79b4h/2/

CSS

div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;
}

h1 {
  text-align: center;

  margin: 8px;
}

HTML

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

Pour:

• Utilise flexbox!
• Super simple HTML.
• Côtés gauche et droit peuvent être ajustés à l'asymétrie.
• Zéro questions de fond, pas d'hériter de couleurs, etc.
• Liquide de largeur.
• Multi-support.
• Gauche/Centre/Droite/Custom Alignement: il suffit de régler le flex de la propriété séparément pour l'avant et l'après d'éléments, plus les numéros de consacrer plus d'espace à l'autre côté. Supprimer entièrement à gauche ou à droite de l'aligner.
• Des effets intéressants en jouant avec le style de bordure (en fait, je choisi un tour de frontière dans cet exemple). Définir la hauteur de 0px et utiliser border-top au lieu d'un générique en ligne.

Contre:

• Utilise flexbox. Appelez-moi paresseux, mais je n'ai pas construire en toute compatibilité descendante dans cet exemple, donc ça va paraître bizarre sur un navigateur qui prend en charge la pseudo-éléments mais ne prend pas en charge flexbox, bien que la dernière, j'ai vérifié que c'était Chrome (Firefox, etc), qui sont automatiquement mis à jour de toute façon. Pouvez utiliser certains Modernizr.

Cela ne ressemble pas à une très bonne réponse, mais je poste quand même.

Voir: http://jsfiddle.net/rFmQg/

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

h2 {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center
}
h2 span {
    background: #fff;
    padding: 0 9px
}

Je ne l'aime pas parce que:

• Vous devez utiliser une image.
• C'. (il ne fonctionne que si les décors match)