it-swarm.com.de

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

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

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

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

227
Jason

das ist ungefähr so, wie ich es machen würde: Die Zeile wird erstellt, indem ein border-bottom auf den enthaltenden h2 gesetzt wird und dann dem h2 ein kleinerer line-height gegeben wird. Der Text wird dann in einem verschachtelten span mit einem nicht transparenten Hintergrund abgelegt.

HTML:

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

CSS:

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

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

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

315
Darko Z

Nachdem ich verschiedene Lösungen ausprobiert hatte, habe ich eine für unterschiedliche Textbreiten, jeden möglichen Hintergrund und ohne zusätzliche Markierungen verwendet. 

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/

214
Puigcerber

Ok, das ist etwas komplizierter, aber es 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 Vorher und Nachher sind absolut positioniert, sodass wir eines nach links und nach rechts ziehen können. Auch die Breite (in diesem Fall 40%) hängt stark von der Breite des Textes ab. Dazu muss eine Lösung gefunden werden. Zumindest sorgt top: 1.2em dafür, dass die Zeilen 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/

54
Stephan Muller

Noch eine andere Methode:

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

36
Rafael

Hier ist eine Flex-basierte Lösung.

HTML:

<h1>Today</h1>

CSS:

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

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

25
Tsuneo Yoshioka

für spätere (heutige) Browser erleichtert display:flex andd pseudo-elements das Zeichnen. border-style, box-shadow und sogar background helfen auch beim Schminken .  demo below

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>

14
G-Cyr

.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.35);
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}
<div class="hr-sect">Text</div>

9
Sujal Patel
<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 dem Bereich einen Abstand, um mehr Platz zwischen Text und Linie zu schaffen.

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

9
Stephan Muller

Ich habe mich nach einigen Lösungen für diese einfache Dekoration umgesehen und einige gefunden, einige komisch, manche sogar mit JS, um die Höhe der Schrift zu berechnen und bla, bla, bla, dann habe ich das gelesen in diesem Beitrag und lest einen Kommentar von thirtydot, in dem es um fieldset und legend geht, und ich dachte, das wäre es.

Ich überschreibe diese 2 Elementstile. Ich denke, Sie könnten die W3C-Standards für sie kopieren und in Ihre .middle-line-text-Klasse aufnehmen (oder wie auch immer Sie es nennen wollen), 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 Randstilen gespielt und es funktioniert auch in Android;) (Getestet auf KitKat 4.XX)

BEARBEITEN:

Nach Bekerov Arturs Idee, die auch eine schöne Option ist, habe ich das .png base64-Bild geändert, um den Strich mit einer .SVG-Datei zu erstellen, sodass Sie in jeder Auflösung rendern und auch die Farbe des Elements ändern können, ohne dass dazu andere Software benötigt wird :)

/* 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;
}
7
legnaleama

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

Erwähnenswerte Fragen:

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

Sie möchten auch nicht "guesstimate" wie breit die Abschnitte sind, da die Stile dadurch sehr unflexibel und nahezu unmöglich auf einer responsiven Site implementiert werden können, an der sich die Breite des Inhalts ändert. 

Lösung:

(View JSFiddle)

Anstatt einen Rand mit einem background-color zu "maskieren", verwenden Sie Ihre display-Eigenschaft.

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 Texts, indem Sie Ihre font-size-Eigenschaft in das .group-Element einfügen.

Einschränkungen:

  • Kein mehrzeiliger Text Nur einzelne Zeilen.
  • HTML-Markup ist nicht so elegant
  • Die top-Eigenschaft des .line-Elements muss die Hälfte von line-height sein. Wenn Sie also einen line-height von 1.5em haben, sollte die top-.75em sein. Dies ist eine Einschränkung, da sie nicht automatisiert ist. Wenn Sie diese Stile auf Elemente mit unterschiedlichen Zeilenhöhen anwenden, müssen Sie möglicherweise Ihren line-height-Stil erneut anwenden.

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

5
Mike McLin

Dies gibt Ihnen eine statische Linienbreite, funktioniert aber hervorragend ... Die Linienbreite wird durch Hinzufügen oder Verwenden von '00a0' (einem Unicode-Bereich) gesteuert.

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

3
tomyo

Von so vielen Alternativen würde ich diese Antwort vorziehen, da es die heutigen Browser vielfach kreuzt. 

Ich benutze es mehr als eine meiner Homepage. Es wird empfohlen, nur einen einzigen <h1> zu haben, insbesondere auf der Hauptseite. Daher muss h1 in h2 oder höher geändert werden.

h2 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h2:before, h2: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 */
}
<h2>side lines via flex</h2>

3
Chetabahana
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


2

Wenn jemand sich fragt, wie er die Überschrift so einstellen soll, dass er auf der linken Seite einen festen Abstand hat (und nicht wie oben dargestellt zentriert), habe ich das herausgefunden, indem ich den Code von @ Puigcerber geändert habe.

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 das JSFiddle .

2
m4r73n

Ich benutze ein Tabellenlayout, um die Seiten dynamisch auszufüllen und um absolute Höhe positionierte Divs für dynamische vertikale Positionierung:

 enter image description here

  • keine fest codierten Maße
  • keine bilder
  • keine Pseudoelemente
  • respektiert den Hintergrund
  • aussehen der Kontrollleiste

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

Ich fand, dass ein wenig unterhalb der wahren Mitte am besten mit Text aussieht. Dies kann eingestellt werden, wo der 55% ist (größere Höhe senkt den Balken). Das Erscheinungsbild der Zeile kann an dem Ort geändert werden, an dem sich border-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;
}
1
Micropig

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

Einige Einstellungen sind fest verdrahtet, jedoch nur zu Demonstrationszwecken. Ich denke, dass diese Lösung in fast jedem modernen Browser funktionieren sollte. Entferne/korrigiere einfach die festen Einstellungen für die .flex-Parent-Klasse, passe Farben/Text/Sachen an und (hoffentlich) du wirst mit dieser Herangehensweise genauso glücklich 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/

0
Wellspring

Leute, die Bootstrap 4 verwenden, können mit dieser Methode erreichen. Klassen, die im HTML-Code erwähnt werden, 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 Ihr HTML so

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

Ich habe die meisten der vorgeschlagenen Methoden ausprobiert, endet jedoch mit einigen Problemen wie voller Breite oder Nicht geeignet für dynamischen Inhalt. Schließlich habe ich einen Code geändert und funktioniert einwandfrei. In diesem Beispielcode werden diese Zeilen vor und nach gezeichnet, und der Inhalt kann flexibel geändert werden. Auch zentriert. 

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/

0
Fasil kk

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

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;
}
0
طلحة

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 in https://stackoverflow.com/a/57279326/6569224 beantwortet

0

Ich bin nicht ganz 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 bisschen hackig und ich weiß nicht, ob es mit allen Browsern funktioniert, und Sie müssen den negativen Rand entsprechend der Schriftgröße einstellen. Funktioniert aber auf Chrom. 

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

<hr><p>def</p>
0
Munim