CSS-Technik für eine horizontale Linie mit Wörtern in der Mitte

Question

Ich versuche, eine horizontale Linie mit etwas Text in der Mitte zu erstellen. Zum Beispiel:

----------------------------------- mein Titel hier -----------------------------

Gibt es eine Möglichkeit, dies in CSS zu tun? Natürlich ohne die ganzen "-"-Bindestriche.

Answer 1

Ich würde es ungefähr so machen: Die Zeile wird durch Setzen einer border-bottom auf dem enthaltenden h2 dann die h2 eine kleinere line-height . Der Text wird dann in eine verschachtelte span mit nicht-transparentem Hintergrund.

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>

Ich habe es nur in Chrome getestet, aber es gibt keinen Grund, warum es in anderen Browsern nicht funktionieren sollte.

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

Answer 2

Nachdem ich verschiedene Lösungen ausprobiert habe, habe ich eine gefunden, die für verschiedene Textbreiten, jeden möglichen Hintergrund und ohne zusätzliches Markup gilt.

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>

Ich habe es in IE8, IE9, Firefox und Chrome getestet. Sie können es hier überprüfen http://jsfiddle.net/Puigcerber/vLwDf/1/

Answer 3

Hier ist eine Flex-basierte Lösung.

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle: https://jsfiddle.net/j0y7uaqL/

Answer 4

Die kürzeste und beste Methode:

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

<span> your text </span>

Answer 5

Ok, das hier ist etwas komplizierter, aber es funktioniert in allen Programmen außer 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; 
}

Die Elemente :before und :after sind absolut positioniert, so dass wir eines nach links und eines nach rechts ziehen können. Auch die Breite (40% in diesem Fall) ist sehr abhängig von der Breite des Textes innerhalb. Zumindest die top: 1.2em sorgt dafür, dass die Zeilen mehr oder weniger in der Mitte des Textes bleiben, auch wenn Sie eine andere Schriftgröße verwenden.

Es scheint aber gut zu funktionieren: http://jsfiddle.net/tUGrf/3/