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

Ich versuche eine horizontale Regel mit einem Text in der Mitte zu erstellen. Beispielsweise:

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

Gibt es eine Möglichkeit, dies in CSS zu tun? Ohne all die "-" Striche offensichtlich.

So würde ich es ungefähr machen: Die Linie wird erstellt, indem ein border-bottomauf das Enthalten gesetzt wird und h2dann h2ein kleineres gegeben wird line-height. Der Text wird dann in einen verschachtelten spanHintergrund mit nicht transparentem Hintergrund eingefügt.

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 nur in Chrome getestet, aber es gibt keinen Grund, warum es in anderen Browsern nicht funktionieren sollte.

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

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

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/

Ok, dieser ist komplizierter, aber er funktioniert in allem 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: vor und: nach sind absolut so positioniert, dass wir eines nach links und eines nach rechts ziehen können. Auch die Breite (in diesem Fall 40%) hängt stark von der Breite des Textes ab. Sie müssen sich eine Lösung dafür überlegen. Zumindest dietop: 1.2em stellt das sicher, dass die Linien mehr oder weniger in der Mitte des Textes bleiben, auch wenn Sie eine andere Schriftgröße haben.

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

Kürzeste und beste Methode:

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

<span> your text </span>

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 #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}

<h1>Today</h1>

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

für spätere (heutige) Browser, display:flexundd pseudo-elements macht es einfach zu zeichnen. border-style, box-shadowUnd sogar backgroundhilft auch für die Make - up.

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h1>side lines via flex</h1>

<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; 
}

Geben Sie der Spanne einen Abstand, um mehr Platz zwischen dem Text und der Linie zu schaffen.

Beispiel: http://jsfiddle.net/tUGrf/

Ich habe mich nach Lösungen für diese einfache Dekoration umgesehen und einige gefunden, einige seltsam, einige sogar mit JS, um die Höhe der Schrift zu berechnen, und bla, bla, bla, dann habe ich die gelesen eine auf diesem Beitrag und lesen Sie einen Kommentar von dreißig Punkten über fieldsetundlegend ich dachte , dass es war.

Ich überschreibe diese beiden Elementstile. Ich denke, Sie könnten die W3C-Standards für sie kopieren und in Ihre .middle-line-textKlasse aufnehmen (oder wie auch immer Sie es nennen möchten), aber das habe ich getan:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

Hier ist die Geige: http://jsfiddle.net/legnaleama/3t7wjpa2/

Ich habe mit den Rahmenstilen gespielt und es funktioniert auch in Android;) (Getestet auf Kitkat 4.XX)

BEARBEITEN:

Nach der Idee von Bekerov Artur, die auch eine gute Option ist, habe ich das .png base64-Bild geändert, um den Strich mit einer .SVG zu erstellen, sodass Sie in jeder Auflösung rendern und auch die Farbe des Elements ohne andere Software ändern können :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

Lösung für IE8 und neuere ...

Bemerkenswerte Themen:

Verwenden von background-color zum Maskieren eines Rahmens ist möglicherweise nicht die beste Lösung. Wenn Sie eine komplexe (oder unbekannte) Hintergrundfarbe (oder ein unbekanntes Bild) haben, schlägt die Maskierung letztendlich fehl. Wenn Sie die Größe des Texts ändern, werden Sie feststellen, dass die weiße Hintergrundfarbe (oder was auch immer Sie einstellen) den Text in der Zeile darüber (oder darunter) verdeckt.

Sie möchten auch nicht "schätzen", wie breit die Abschnitte sind, da dies die Stile sehr unflexibel macht und auf einer reaktionsfähigen Site, auf der sich die Breite des Inhalts ändert, fast unmöglich zu implementieren ist.

Lösung:

( Ansicht JSFiddle )

background-colorVerwenden Sie Ihre displayEigenschaft, anstatt einen Rahmen mit a zu "maskieren" .

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

Ändern Sie die Größe Ihres Textes, indem Sie Ihre font-sizeImmobilie auf dem platzieren.group Element platzieren.

Einschränkungen:

• Kein mehrzeiliger Text. Nur einzelne Zeilen.
• HTML-Markup ist nicht so elegant
• topEigenschaft auf .lineElement muss die Hälfte von sein line-height. Also, wenn Sie eine line-heightvon haben 1.5em, dann topsollte die sein -.75em. Dies ist eine Einschränkung, da es nicht automatisiert ist. Wenn Sie diese Stile auf Elemente mit unterschiedlichen Linienhöhen anwenden, müssen Sie Ihren line-heightStil möglicherweise erneut anwenden .

Für mich überwiegen diese Einschränkungen die "Probleme", die ich zu Beginn meiner Antwort für die meisten Implementierungen festgestellt habe.

Dies gibt Ihnen eine feste Länge für die Linien, funktioniert aber hervorragend. Die Zeilenlängen werden durch Hinzufügen oder Nehmen von '\ 00a0' (Unicode-Raum) gesteuert.

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

Wenn sich jemand fragt, wie die Überschrift so eingestellt werden soll, dass sie mit einem festen Abstand zur linken Seite angezeigt wird (und nicht wie oben dargestellt zentriert ist), habe ich dies durch Ändern des Codes von @ Puigcerber herausgefunden.

h1 {
  white-space: nowrap;
  overflow: hidden;
}

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

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

Hier die JSFiddle .

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

das wird dir helfen

Ich verwende ein Tabellenlayout, um die Seiten dynamisch zu füllen, und 0-Höhen-Divs mit absoluter Position für die dynamische vertikale Positionierung:

• Keine fest codierten Abmessungen
• keine Bilder
• keine Pseudoelemente
• respektiert den Hintergrund
• Erscheinungsbild der Steuerleiste

https://jsfiddle.net/eq5gz5xL/18/

Ich fand, dass ein wenig unterhalb der wahren Mitte mit Text am besten aussieht; Dies kann dort eingestellt werden, wo es 55%ist (eine höhere Höhe senkt die Stange). Das Erscheinungsbild der Linie kann dort geändert werden, wo dieborder-bottom befindet.

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

Nicht um ein totes Pferd zu schlagen, aber ich suchte nach einer Lösung, landete hier und war selbst nicht zufrieden mit den Optionen, nicht zuletzt aus irgendeinem Grund konnte ich die hier angebotenen Lösungen nicht dazu bringen, für mich gut zu funktionieren. (Wahrscheinlich aufgrund von Fehlern meinerseits ...) Aber ich habe mit Flexbox gespielt und hier ist etwas, das ich für mich selbst arbeiten durfte.

Einige der Einstellungen sind fest verdrahtet, jedoch nur zu Demonstrationszwecken. Ich denke, diese Lösung sollte in nahezu jedem modernen Browser funktionieren. Entfernen / passen Sie einfach die festen Einstellungen für die .flex-Elternklasse an, passen Sie Farben / Text / Zeug an und (ich hoffe) Sie werden mit diesem Ansatz genauso zufrieden sein wie ich.

HTML:

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

Ich habe meine Lösung auch hier gespeichert: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Für den Fall, dass jemand möchte, ist meiner Meinung nach die beste Lösung mit CSS eine Flexbox.

Hier ist ein Beispiel:

.kw-dvp-HorizonalButton {
    color: #0078d7;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}
.kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
    background-color: #0078d7;
    content: "";
    display: inline-block;
    float:left;
    height:1px;
}
.kw-dvp-HorizonalButton:before {
    order:1;
    flex-grow:1;
    margin-right:8px;
}
.kw-dvp-HorizonalButton:after {
    order: 3;
    flex-grow: 1;
    margin-left: 8px;
}
.kw-dvp-HorizonalButton * {
    order: 2;
}

    <div class="kw-dvp-HorizonalButton">
        <span>hello</span>
    </div>

Dies sollte immer zu einem perfekt zentrierten, ausgerichteten Inhalt mit einer Linie nach links und rechts führen, mit einem leicht zu kontrollierenden Abstand zwischen der Linie und Ihrem Inhalt.

Es erstellt ein Linienelement vor und nach Ihrem obersten Steuerelement und setzt es in Ihrem Flex-Container auf die Reihenfolge 1,3, während Sie Ihren Inhalt auf die Reihenfolge 2 festlegen (in die Mitte gehen). Wenn Sie das Vorher / Nachher-Wachstum von 1 angeben, belegen sie gleichermaßen den freiesten Speicherplatz, während Ihre Inhalte zentriert bleiben.

Hoffe das hilft!

Ich bin mir nicht sicher, aber Sie könnten versuchen, eine horizontale Regel zu verwenden und den Text über den oberen Rand zu schieben. Sie benötigen eine feste Breite für Ihr Absatz-Tag und einen Hintergrund. Es ist ein wenig hackig und ich weiß nicht, ob es in allen Browsern funktioniert, und Sie müssen den negativen Rand basierend auf der Größe der Schriftart festlegen. Funktioniert aber auf Chrom.

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

Ich habe die meisten vorgeschlagenen Methoden ausprobiert, aber es endet mit einigen Problemen wie voller Breite oder Nicht für dynamische Inhalte geeignet. Schließlich habe ich einen Code geändert und funktioniert perfekt. Dieser Beispielcode zeichnet diese Linien vorher und nachher und ist flexibel in Bezug auf Inhaltsänderungen. Mitte auch ausgerichtet.

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

Ergebnis: https://jsfiddle.net/fasilkk/vowqfnb9/

Für mich funktioniert diese Lösung einwandfrei ...

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}

Personen, die Bootstrap 4 verwenden, können dies mit dieser Methode erreichen. Im HTML-Code erwähnte Klassen stammen aus Bootstrap 4.

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

Und schreiben Sie Ihren HTML-Code so

<div class="d-flex flex-row align-items-center">
  <h1><span> Title </span> </h1>
</div>

Horizontale und vertikale Linie mit Wörtern in der Mitte

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}

<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

Dies wird auch unter https://stackoverflow.com/a/57279326/6569224 beantwortet

• Erstellt kleines Bild 1x18 mit einem einzelnen Punkt der Farbe # e0e0e0
• Das Bild wurde in Base64-Code umgewandelt

Ergebnis:

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}

<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>