Technique CSS pour une ligne horizontale avec des mots au milieu

Question

J'essaie de créer une règle horizontale avec du texte au milieu. Par exemple :

----------------------------------- mon titre ici -----------------------------

Existe-t-il un moyen de faire cela en CSS ? Sans tous les tirets "-", évidemment.

Answer 1

Voici en gros comment je procéderais : la ligne est créée en définissant un paramètre border-bottom sur le contenant h2 puis en donnant le h2 un plus petit line-height . Le texte est ensuite placé dans un span avec un arrière-plan non-transparent.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

J'ai testé dans Chrome uniquement, mais il n'y a aucune raison pour que cela ne fonctionne pas dans d'autres navigateurs.

JSFiddle : http://jsfiddle.net/7jGHS/

Answer 2

Après avoir essayé différentes solutions, j'en ai trouvé une valable pour différentes largeurs de texte, n'importe quel arrière-plan possible et sans ajouter de balises supplémentaires.

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

Je l'ai testé dans IE8, IE9, Firefox et Chrome. Vous pouvez le vérifier ici http://jsfiddle.net/Puigcerber/vLwDf/1/

Answer 3

La méthode la plus courte et la meilleure :

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

Answer 4

Ok, celui-ci est plus compliqué mais il fonctionne dans tout sauf IE<8

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

Les éléments :before et :after sont positionnés de manière absolue, de sorte que nous pouvons en tirer un vers la gauche et un vers la droite. De plus, la largeur (40% dans ce cas) dépend beaucoup de la largeur du texte à l'intérieur je dois réfléchir à une solution pour cela. En tout cas, la top: 1.2em fait en sorte que les lignes restent plus ou moins au centre du texte, même si la taille de la police est différente.

Mais il semble bien fonctionner : http://jsfiddle.net/tUGrf/3/

Answer 5

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

Donnez un padding à l'espacement pour créer plus d'espace entre le texte et la ligne.

Exemple : http://jsfiddle.net/tUGrf/