Texte centré avec les rh-comme ligne sur les deux côtés, sans l'aide d'une table

J'ai besoin de créer un titre avec l'égalité de longueur des lignes sur les deux côtés du texte du titre, et une taille fixe l'espacement entre les lignes et le texte. Le texte varie donc il ne doit pas définir une largeur. Les lignes doivent prendre toutes les autres de la largeur disponible dans le titre conteneur. Le texte du titre ne doit pas définir un arrière-plan parce que l'arrière-plan derrière il va varier. Quelque chose comme ceci:

--------------------------------------------------------- Texte ---------------------------------------------------------

Je l'ai résolu en utilisant un tableau:

<table width="100%">
  <td><hr /></td>
  <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
  <td><hr /></td>
</table>

Vous pouvez l'essayer ici: http://jsfiddle.net/md2dF/3/

Sémantiquement c'est une très mauvaise solution, le titre n'a rien à voir avec des données tabulaires. Comment voulez-vous faire cela sans une table?

Pour résumer (parce que les solutions proposées ont tous oublié une ou à plusieurs des exigences):

Le titre ne doit pas avoir une largeur fixe
Le texte du titre ne doit pas avoir un arrière-plan
Le texte du titre ne doit pas avoir une largeur fixe
Les lignes de chaque côté du texte doit prendre toutes les autres largeur
L'espacement entre les lignes et le texte doit avoir une largeur fixe
En cas de doute, regardez http://jsfiddle.net/md2dF/3/

OriginalL'auteur Robert Kajic | 2012-09-20

6

Edit:

Sans couleur de fond, ni de l'image:
```
<div>
    <div><hr></div>
    <span>Some text</span>
    <div><hr></div>
</div>
```
CSS:
```
div {
    width:300px;
    text-align:center;
    display:table;
}
div > div {
    display:table-cell;
    vertical-align:middle;
}
div > span {
    white-space:nowrap;
}
```
Travaille dans IE8+

Démonstration en direct

Réponse originale à cette question:

Sans image:
```
<div>
<span>Some text</span>
</div>
```
CSS:
```
div {
    border-bottom:1px solid #000;
    line-height:16px;
    text-align:center;
}
span {
    background:#FFF;
    position:relative;
    bottom:-8px; /* half of line-height */
    padding:0 15px;
}
```
Démonstration en direct

Vous pouvez utiliser n'importe quel bloc élément que vous souhaitez (h1, h2, whatever) au lieu de div.

Comme je l'ai dit dans la question, le texte ne doit pas avoir une couleur d'arrière-plan.
Désolé, j'ai raté la partie. Je vais modifier ma réponse
La nouvelle réponse n'est pas correcte non plus. Les lignes doivent prendre toutes les largeur restante. Les vôtres ne le sont pas.
Vous pouvez ajuster la durée et des rh, de la taille au besoin. Si le nombre de caractères varient beaucoup, votre méthode semble être la "meilleure".
À la fois le texte et le récipient doit être en mesure de varier. Je ne veux pas de régler manuellement toutes les largeurs.

OriginalL'auteur Giona

La façon de résoudre ce problème sans en connaître la largeur et la couleur de fond est la suivante:

Structure

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
}

.strike > span:after {
    left: 100%;
}

Exemple: http://jsfiddle.net/z8Hnz/

Excellente solution. Au lieu de background: red, si vous utilisez border: 1px solid red ou border-top: 1px solid red, la ligne va apparaître dans la sortie imprimée.
il fonctionne pour moi, même aujourd'hui.

OriginalL'auteur MartinF

Vous pouvez le faire comme si (pour l'arrière-plan, vous pouvez faire une image de 1px de la couleur de votre choix):

<h1><span>Some Text</span></h1>

h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }

Edit: Sans bg couleur:

.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}

<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>

Vous aurez besoin d'ajuster les pourcentages et autres joyeusetés, mais cela fonctionne en général.

Comme je l'ai dit dans la question, le texte ne doit pas avoir une couleur d'arrière-plan.
Ajout d'une deuxième solution pour vous, donnez-lui un coup de feu? 🙂
Il ne fonctionne pas: jsfiddle.net/kajic/d5znr

OriginalL'auteur Tammy Shipps

Vous devez vous connecter pour publier un commentaire.

Edit:

Réponse originale à cette question: