Fügen Sie zentrierten Text in die Mitte einer <hr /> -ähnlichen Zeile ein

217

Ich frage mich, welche Optionen man in xhtml 1.0 strikt hat, um eine Linie auf beiden Seiten des Textes wie folgt zu erstellen:

Abschnitt eins
----------------------- Nächster Abschnitt -----------------------
Abschnitt zwei

Ich habe darüber nachgedacht, einige ausgefallene Dinge wie diese zu tun:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

Oder alternativ, weil das Obige Probleme mit der Ausrichtung hat (sowohl vertikal als auch horizontal):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

Dies hat auch Ausrichtungsprobleme, die ich mit diesem Durcheinander löse:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

Zusätzlich zu den Ausrichtungsproblemen fühlen sich beide Optionen "fudgy" an, und ich wäre Ihnen sehr dankbar, wenn Sie dies schon einmal gesehen hätten und eine elegante Lösung kennen.

Brian M. Hunt
quelle
3
Hier ist ein weiterer Thread mit einer Herausforderung ohne zusätzliche Tags - und einer Lösung! stackoverflow.com/questions/12648513/…
Willoller
1
stackoverflow.com/questions/5214127/… ist immer noch die beste Lösung.
Eine nützliche Antwort hier wäre CSS Grid.
Brian M. Hunt
Es wurde eine Antwort (SCSS) hinzugefügt, die fast jedes Element in einen Teiler ohne festgelegten Hintergrund verwandelt und die Einstellung ermöglicht: Farbe und Strichstil (durchgehend, gepunktet, gestrichelt) des Teilers, Position des Texts (links, rechts, Mitte) sowie die Klasse, die dies anwendet (standardmäßig .divider).
Tao
Angesichts der aktuellen Flexbox-Unterstützung denke ich, dass meine Antwort etwas Sichtbarkeit gewinnen könnte.
MatTheCat

Antworten:

63

Ich weiß nicht, ob dies herausgefunden wurde, aber Flexbox bietet eine ziemliche Lösung:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

Eine Demo finden Sie unter http://jsfiddle.net/MatTheCat/Laut6zyc/ .

Heutzutage ist die Kompatibilität nicht so schlecht (Sie können alle alten Flexbox-Syntaxen hinzufügen) und sie verschlechtert sich elegant.

MatTheCat
quelle
Beste Antwort in Anbetracht der Flexbox-Unterstützung in diesen Tagen
Akivajgordon
Dies ist eine schöne Lösung
Smaillns
217

Wie wäre es mit:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

Schauen Sie sich diese JSFiddle an .

Sie können vwoder verwenden %, um es ansprechbar zu machen .

Fletcher Moore
quelle
2
Es ist etwas schwierig, einen genauen Spitzenwert zu erhalten. Es ist nicht genau -0,5em;
Mitar
perfekt. "Responsive" auch
JimXC
4
In meiner Antwort finden Sie eine Lösung, bei der Sie weder die Hintergrundfarbe noch die Breite angeben müssen.
MartinF
Siehe meine Antwort für reaktionsschnelles, transparentes BG, variablen Stil und Höhe des Teilers, variable Position des Textes. Kann mit SCSS auch mehrmals auf verschiedene Selektoren angewendet werden, um mehr als einen Teilertyp im selben Projekt zu haben. Funktioniert mit jedem font-size.
Tao
193

Der Weg, dies zu lösen, ohne die Breite und die Hintergrundfarbe zu kennen, ist der folgende:

Struktur

<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%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

Beispiel: http://jsfiddle.net/z8Hnz/

Doppelte Linie

Verwenden Sie eine der folgenden Optionen, um eine doppelte Linie zu erstellen:

1) Fester Abstand zwischen den Zeilen

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

Beispiel: http://jsfiddle.net/z8Hnz/103/

2) Benutzerdefinierter Abstand zwischen den Zeilen

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

Beispiel: http://jsfiddle.net/z8Hnz/105/


SASS (SCSS) -Version

Basierend auf dieser Lösung habe ich SCSS "mit Farbeigenschaft" hinzugefügt, wenn es jemandem helfen könnte ...

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

Anwendungsbeispiel:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}
MartinF
quelle
Diese Version funktioniert besser, wenn Sie ein Bild für die Linie verwenden - oder zumindest ist es einfacher zu bearbeiten und
reaktionsschnell zu
Sehr gute Arbeit! Können Sie Ihre Zauberei verwenden, um eine doppelte Linie zu erstellen? (Ansonsten werde ich nur auf ein winziges sich wiederholendes Hintergrundbild zurückgreifen.)
wloescher
3
Toller Ausschnitt! Danke :)
plong0
2
Dies ist die beste Antwort, da es ohne das Einstellen des Hintergrunds funktioniert und wenn Sie den transparenten Hintergrund
einstellen müssen
1
Das erste Beispiel ist einfach großartig! Glückwunsch! Es sollte die richtige Antwort sein!
Luiz Eduardo
87

Sie können dies mit :: vorher und :: nachher erreichen, ohne die Breite des Containers oder die Hintergrundfarbe zu kennen und um eine bessere Gestaltung der Zeilenumbrüche zu erreichen. Dies kann beispielsweise geändert werden, um Doppellinien, gepunktete Linien usw. zu erstellen.

JSFiddle

CSS- und HTML-Nutzung:

.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">CATEGORY</div>

SCSS-Version:

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;

    &:before, &:after {
        content: "";
        flex-grow: 1;
        background: rgba(0, 0, 0, 0.35);
        height: 1px;
        font-size: 0;
        line-height: 0;
        margin: 0 8px;
    }
}
Allwissenheit
quelle
1
Elegante Lösung, obwohl es eine Einschränkung gibt: Wenn kein Text vorhanden ist, haben Sie immer noch eine Lücke zwischen den Zeilen.
Farside
13
Dies ist die sauberste Lösung in diesem Thread, um ehrlich zu sein. Das Problem ohne Text kann übersehen werden, da Sie den Teiler immer mit Text haben möchten.
Robert
51

Versuche dies:

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}
<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

Live-Vorschau auf jsFiddle .

Diodeus - James MacFarlane
quelle
4
Es funktioniert perfekt und verwendet <hr />. Was könnte also an dieser Antwort falsch sein? Ich sage nichts.
Kirby
4
+1 Sie müssen sich nicht mit der Hintergrundfarbe herumschlagen oder Tags auf unbeabsichtigte Weise verwenden. Ein Nachteil ist, dass die .divider hrBreite davon abhängt, wie lang der Text ist. Vorschlag: .dividerund .divider hrBreiten sollten in emEinheiten angegeben werden. Um die hrBreite, Verwendung ( .dividerBreite minus Anzahl der Zeichen) / 2.
Kelvin
12
Es ist nicht die beste Lösung. Was ist, wenn Sie keine Gewissheit über die Breite des Textes haben? Alles wird ruiniert, wenn der Text länger wird.
Iwona Trąbka
Dies ist die beste und einfachste Antwort
ha9u63ar
1
40% sind hier falsch. Wenn der Text länger ist, würde er falsch ausgerichtet sein
TomSawyer
21

Ich bin gerade auf dasselbe Problem gestoßen. Hier ist eine Möglichkeit, es zu lösen:

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

Es funktioniert, ohne einen Hintergrund für das Textelement festzulegen, dh es sieht gut aus, unabhängig davon, welcher Hintergrund dahinter steht.

Sie können es hier ausprobieren: http://jsfiddle.net/88vgS/

Robert Kajic
quelle
Löst das OP-Problem nicht. Dadurch werden zwei Zeilen mit Text dazwischen erstellt. Er möchte eine Zeile, die teilweise unterbrochen ist und Text im unterbrochenen Abschnitt enthält. Dann wird die Zeile fortgesetzt.
Dracorat
2
Es macht tatsächlich das, was das OP verlangt. Sie können es auf jsfiddle.net/88vgS
Robert Kajic
Was ist eine teilweise unterbrochene Zeile mit Text im unterbrochenen Abschnitt, wenn nicht zwei Zeilen mit Text dazwischen?
Robert Kajic
Sie sollten dort die entsprechenden TR-Tags einwerfen. Ich denke, das hat mich für einen Moment verwirrt. Ich dachte ursprünglich aus irgendeinem Grund, es sei in drei Zeilen, nicht in drei Spalten. Ein korrektes Markup hätte mich wahrscheinlich nicht dazu gebracht, es so zu sehen. Unabhängig davon ist es definitiv eine praktikable Lösung.
Dracorat
1
Dies verwendet jedoch Tabellen, das ist NICHT ERLAUBT! Oh, nur ein Scherz. GRIDS haben ihren Platz, fast alle anderen GUI-XML-Frameworks erkennen dies und verwenden sie überall (z. B. WPF / XAML). Danke für die Lösung Kumpel! Dies verdient mehr als 3 Stimmen. Ich vermute jedoch, dass die Abneigung der Menschen gegen die verhassten Tische ein Hindernis sein wird.
Nicholas Petersen
10

AKTUALISIEREN: Dies funktioniert nicht mit HTML5

Weitere Techniken finden Sie in dieser Frage: CSS-Herausforderung. Kann ich dies tun, ohne mehr HTML einzuführen?


Ich habe line-height:0den Effekt in der Kopfzeile meiner Website guerilla-alumnus.com erstellt

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

Eine andere gute Methode ist eingeschaltet http://robots.thoughtbot.com/

Er verwendet ein Hintergrundbild und schwebt, um einen coolen Effekt zu erzielen

Willoller
quelle
1
Ich mag das, es sieht auf Ihrer Website großartig aus, aber ich konnte es nicht zum Laufen bringen (ich vermute eine Störung durch jQuery CSS). :( Aber es ist wirklich cool.
Brian M. Hunt
Ich denke, dein h1 drückt die Spanne nach unten.
Imns
1
Dies ist ein "Hack", der das unterschiedliche Renderverhalten für DOCTYPE XTHML 1.0 Transitional verwendet. Wenn Sie DOCTYPE-HTML (für HTML5) verwenden, funktioniert dies NICHT.
Peter
6
<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>
Aleksejs Mjaliks
quelle
6

Wenn Sie CSS verwenden können und bereit sind, das veraltete alignAttribut zu verwenden, funktioniert eine gestaltete Feldmenge / Legende:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

Der beabsichtigte Zweck eines Feldsatzes besteht darin, Formularfelder logisch zu gruppieren. Wie Willoler betonte, funktioniert ein text-align: centerStil für legendElemente nicht. align="center"ist veraltetes HTML, sollte aber den Text in allen Browsern richtig zentrieren.

Trey Hunner
quelle
Eine detailliertere Erklärung, was ich wollte.
dclowd9901
Ich bin mir ziemlich sicher, dass es <legend>die Anzeigeeigenschaften eines blockoder eines inline-blockElements annimmt , da es aufgefüllt und mittext-align:center
Rändern versehen werden
Ja, Legenden sind großartig für die Semantik - ich benutze sie zum Einwickeln von
Radiogruppen
Ich habe meine Antwort korrigiert. Leider ist aufgrund der Sturheit bestimmter Browser bei der legendGestaltung des Elements align="center"die einzige Lösung, die ich finden konnte, die a zuverlässig verlagert legend.
Trey Hunner
6

Bootstrap-Raster:

HTML:

  <div class="row vertical-center">
    <div class="col-xs-5"><hr></div>
    <div class="col-xs-2" style="color: white"> Text</div>
    <div class="col-xs-5"><hr></div>
  </div>

CSS:

.vertical-center{
  display: flex;
  align-items: center;
}
dasfdsa
quelle
1
Die vertical-centerKlasse existiert nicht mehr in Bootstrap (4.3.1). Könnten Sie bitte Ihre Antwort aktualisieren, um zu sagen align-items-center?
Cameron Hudson
5

Sie können einfach die relative Position verwenden und eine Höhe für das übergeordnete Element festlegen

.fake-legend {
  height: 15px;
  width:100%;
  border-bottom: solid 2px #000;
  text-align: center;
  margin: 2em 0;
}
.fake-legend span {
  background: #fff;
  position: relative;
  top: 0;
  padding: 0 20px;
  line-height:30px;
}
<p class="fake-legend"><span>Or</span>
</p>

Sidonaldson
quelle
5

Hier ist eine einfache Lösung nur mit CSS, keine Hintergrundtricks ...

.center-separator {
    display: flex;
  line-height: 1em;
  color: gray;
}

.center-separator::before, .center-separator::after {
    content: '';
    display: inline-block;
    flex-grow: 1;
    margin-top: 0.5em;
    background: gray;
    height: 1px;
    margin-right: 10px;
    margin-left: 10px;
  }

HTML:

  <div class="center-separator">
    centered text
  </div>

Beispiel Geige: https://jsfiddle.net/0Lkj6wd3/

Yftach
quelle
Tolle und wiederverwendbare Lösung, wie eine Utility-Klasse.
Vignesh
3
<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

Böser Hack ...

Dänu
quelle
1
Ich würde es nicht als Hack bezeichnen, aber ich würde testen, ob es in allen Browsern funktioniert, die Sie unterstützen möchten.
Nick Larsen
fieldset will nicht so benutzt werden, es wurde an seinen Platz gehackt ;-)
Dänu
3

Ich habe einen 2 Jahre alten Beitrag zusammengestellt, aber hier ist, wie ich mit nur einem Element und CSS an diese Situationen herangehe.

​h1 {
    text-align: center;
}

h1:before,
h1:after {
    content: "";
    background: url('http://heritageonfifth.com/images/seperator.png') left center repeat-x;
    width: 15%;
    height: 30px;
    display: inline-block;
    margin: 0 15px 0 0;
}

h1:after{
    background-position: right center;
    margin: 0 0 0 15px;
}

Und hier ist eine Geige zum Auschecken: http://jsfiddle.net/sRhBc/ (zufälliges Bild von Google für die Grenze).

Der einzige Nachteil dieses Ansatzes ist, dass er IE7 nicht unterstützt.

Lazar Vuckovic
quelle
3

Benutz einfach

    hr
    {
        padding: 0;
        border: none;
        border-top: 1px solid #CCC;
        color: #333;
        text-align: center;
        font-size: 12px;
        vertical-align:middle;
    }
    hr:after
    {
        content: "Or";
        display: inline-block;
        position: relative;
        top: -0.7em;
        font-size: 1.2em;
        padding: 0 0.25em;
        background: white;
    }
Anit Garg
quelle
2

Woohoo mein erster Beitrag, obwohl dieser ein Jahr alt ist. Um die Probleme mit der Hintergrundfärbung bei Wrappern zu vermeiden, können Sie den Inline-Block mit hr verwenden (das hat niemand explizit gesagt). Die Textausrichtung sollte korrekt zentriert sein, da es sich um Inline-Elemente handelt.

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>
Jacob Block
quelle
2

Ich benutze eine h1mit einer Spannweite in der Mitte.

HTML-Beispiel:

<h1><span>Test archief</span></h1>

CSS-Beispiel:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

So einfach ist das.

Youri
quelle
Willkommen bei StackOverflow, Youri. Anstelle von a spankönnen Sie auch a verwenden div. Es dient demselben Zweck, außer dass es natürlich ein Blockelement ist. :)
Nix
@Nix Blockelement im Inline-Element? Nein danke, span ist eine gute Wahl
Jonathan Azulay
1
@ MrAzulay h1ist ein Inline-Element. spanist schön zum Verpacken von Sachen, aber der Grund, warum ich divin diesem Fall einen bevorzuge , ist, dass Youri CSS verwendet, um das spanzu setzen display:block;. Ich sehe keinen Sinn darin, ein Inline-Element in ein Blockelement zu verwandeln, wenn geeignete Blockelemente ( div) verfügbar sind.
Nix
@Nix Ist das nicht eine ziemlich häufige Sache? Beim Einfügen von Blöcken inline ist es imo eine schlechte Übung. Dies ist ein guter Beitrag darüber skypoetsworld.blogspot.se/2008/10/…
Jonathan Azulay
Hoppla, ich habe meinen letzten Kommentar falsch geschrieben. Ich bin damit einverstanden, dass Sie keinen Block in ein Inline-Element h1einfügen sollten , sondern tatsächlich ein BLOCK-Element. Entschuldigung für die Verwirrung. Trotzdem sehe ich keinen Sinn darin, spanein Blockelement zu machen, aber fair genug.
Nix
2

Mit Blick auf oben habe ich geändert zu:

CSS

.divider {
    font: 33px sans-serif;
    margin-top: 30px;
    text-align:center;
    text-transform: uppercase;
}
.divider span {
    position:relative;
}
.divider span:before, .divider span:after {
    border-top: 2px solid #000;
    content:"";
    position: absolute;
    top: 15px;
    right: 10em;
    bottom: 0;
    width: 80%;
}
.divider span:after {
    position: absolute;
    top: 15px;
    left:10em;
    right:0;
    bottom: 0;
}

HTML

<div class="divider">
    <span>This is your title</span></div>

Scheint gut zu funktionieren.

user2673353
quelle
2

Nehmen Sie die Lösung von @ kajic und fügen Sie das Styling in CSS ein:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

Dann CSS (aber es hängt von CSS3 bei der Verwendung des n-ten Selektors ab):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

Prost.

(PS Auf tbody und tr fügen Chrome, IE und Firefox zumindest automatisch tbody und tr ein, weshalb mein Beispiel, wie das von @ kajic, diese nicht enthielt, um die Dinge im erforderlichen HTML-Markup kürzer zu halten. Diese Lösung wurde mit den neuesten Versionen von IE, Chrome und Firefox ab 2013 getestet).

Nicholas Petersen
quelle
2

DEMO-SEITE

HTML

<header>
  <h1 contenteditable>Write something</h1>
</header>

CSS

header{ 
  display:table;
  text-align:center; 
}
header:before, header:after{ 
  content:'';
  display:table-cell; 
  background:#000; 
  width:50%;
  -webkit-transform:scaleY(0.3);
  transform:scaleY(0.3);
}
header > h1{ white-space:pre; padding:0 15px; }
vsync
quelle
2

Dies hat bei mir funktioniert und erfordert keine Hintergrundfarbe hinter dem Text, um eine Grenzlinie auszublenden, sondern verwendet das tatsächliche hr-Tag. Sie können mit den Breiten herumspielen, um verschiedene Größen von Stundenlinien zu erhalten.

<div>
    <div style="display:inline-block;width:45%"><hr width='80%' /></div>
    <div style="display:inline-block;width: 9%;text-align: center;vertical-align:90%;text-height: 24px"><h4>OR</h4></div>
    <div style="display:inline-block;width:45%;float:right" ><hr width='80%'/></div>
</div>
user3898371
quelle
2

Ich habe eine Geige erstellt , die FlexBox verwendet und Ihnen auch verschiedene HR-Stile bietet (doppelte Linie, Symbole in der Mitte der Linie, Schlagschatten, Einschub, gestrichelt usw.).

CSS

button {
    padding: 8px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 2px;
  }

  button:hover {
    cursor: pointer;
  }

  button.active {
    background-color: rgb(34, 179, 247);
    color: #fff;
  }

  .codeBlock {
    display: none;
  }

  .htmlCode, .cssCode {
    background-color: rgba(34, 179, 247, 0.5); 
    width: 100%;
    padding: 10px;
  }

  .divider {
    display: flex;
    flex-direction: row;
    flex-flow: row;
    width: 100%;
  }

  .divider.fixed {
    width: 400px;
  }

  .divider > label {
    align-self: baseline;
    flex-grow: 2;
    white-space: nowrap;
  }

  .divider > hr {
    margin-top: 10px;
    width: 100%;
    border: 0;
    height: 1px;
    background: #666;
  }

  .divider.left > label {
    order: 1;
    padding-right: 5px;
  }

  .divider.left > hr {
    order: 2
  }

  .divider.right > label {
    padding-left: 5px;
  }
  /* hr bars with centered text */
  /* first HR in a centered version */

  .divider.center >:first-child {
    margin-right: 5px;
  }
  /* second HR in a centered version */

  .divider.center >:last-child {
    margin-left: 5px;
  }
  /** HR style variations **/

  hr.gradient {
    background: transparent;
    background-image: linear-gradient(to right, #f00, #333, #f00);
  }

  hr.gradient2 {
    background: transparent;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }

  hr.dashed {
    background: transparent;
    border: 0;
    border-top: 1px dashed #666;
  }

  hr.dropshadow {
    background: transparent;
    height: 12px;
    border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
  }

  hr.blur {
    background: transparent;
    border: 0;
    height: 0;
    /* Firefox... */
    box-shadow: 0 0 10px 1px black;
  }

  hr.blur:after {
    background: transparent;
    /* Not really supposed to work, but does */
    content: "\00a0";
    /* Prevent margin collapse */
  }

  hr.inset {
    background: transparent;
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  hr.flared {
    background: transparent;
    overflow: visible;
    /* For IE */
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 1px 0 0 0;
    border-radius: 20px;
  }

  hr.flared:before {
    background: transparent;
    display: block;
    content: "";
    height: 30px;
    margin-top: -31px;
    border-style: solid;
    border-color: black;
    border-width: 0 0 1px 0;
    border-radius: 20px;
  }

  hr.double {
    background: transparent;
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
  }

  hr.double:after {
    background: transparent;
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
  }

HTML

<div class="divider left">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

Oder hier ist eine interaktive Geige: http://jsfiddle.net/mpyszenj/439/

Jade
quelle
2

Sie können versuchen, ein fieldsetElement zu erstellen und das Element "legend" (Ihr Text "nächster Abschnitt") mit nur border-topset an der Mitte des Felds auszurichten . Ich bin mir nicht sicher, wie eine Legende gemäß dem Feldsatzelement positioniert ist. Ich kann mir vorstellen, dass es einfach ist margin: 0px auto, den Trick zu machen.

Beispiel:

<fieldset>
      <legend>Title</legend>
</fieldset>
dclowd9901
quelle
1

Sie können dies ohne erreichen <hr />. Semantisch sollte das Design mit CSS erfolgen, in diesem Fall ist dies durchaus möglich.

div.header
{
  position: relative;
  text-align: center;
  padding: 0 10px;
  background: #ffffff;
}

div.line
{
  position: absolute;
  top: 50%;
  border-top: 1px dashed;
  z-index: -1;
}

<div class="header">
  Next section
  <div class="line">&nbsp;</div>
</div>

quelle
1

Es gibt immer das gute alte FIELDSET

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }
Chet bei C2IT
quelle
Feldsätze sollten nur mit Formularen verwendet werden.
Tehlivi
1

html

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;" class="add-heading">
    <hr class="add-hr">
    <h2>Add Employer</h2>
    <hr class="add-hr">
</div>

CSS

.add-hr { 
    display: block; height: 1px;
    border: 0; border-top: 4px solid #000;
    margin: 1em 0; padding: 0; 
  }

.add-heading h2{
  text-align: center;
}
Nikhil Bhardwaj
quelle
0

Sie können einen Wrapper-Block mit einem geeigneten Hintergrundbild erstellen (und auch eine Hintergrundfarbe für Ihren zentrierten Textblock festlegen).

Gruszzet
quelle
0

CSS

.Divider {
width: 100%; height: 30px;  text-align: center;display: flex;
}
.Side{
width: 46.665%;padding: 30px 0;
}
.Middle{
width: 6.67%;padding: 20px 0;
}

HTML

<div class="Divider">
    <div class="Side"><hr></div>
    <div class="Middle"><span>OR</span></div>
    <div class="Side"><hr></div>
</div>

Sie können die Breite in den Klassen "Seite" und "Mitte" basierend auf der Länge Ihres Textes im Tag "span" ändern. Stellen Sie sicher, dass die Breite der "Mitte" plus das Zweifache der Breite der "Seite" 100% entspricht.

Betty Lee
quelle
0

Reaktionsschneller, transparenter Hintergrund, variable Höhe und Stil des Teilers, variable Position des Texts, einstellbarer Abstand zwischen Teiler und Text. Kann auch mehrmals mit verschiedenen Selektoren für mehrere Teilerstile in demselben Projekt angewendet werden.
SCSS unten.

Markup (HTML):

<div class="divider" text-position="right">Divider</div>

CSS :

.divider {
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.divider:before,
.divider:after {
  content: '';
  flex: 0 1 100%;
  border-bottom: 5px dotted #ccc;
  margin: 0 1rem;
}

.divider:before {
  margin-left: 0;
}

.divider:after {
  margin-right: 0;
}

.divider[text-position="right"]:after,
.divider[text-position="left"]:before {
  content: none;
}

Ohne text-positiones wird standardmäßig zentriert.

Demo:

Und SCSS , um es schnell zu ändern:

$divider-selector    : ".divider";
$divider-border-color: rgba(0,0,0,.21);
$divider-padding     : 1rem;
$divider-border-width: 1px;
$divider-border-style: solid;
$divider-max-width   : 100%;

#{$divider-selector} {
    display: flex;
    align-items: center;
    padding: 0 $divider-padding;
    max-width: $divider-max-width;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: '';
        flex: 0 1 100%;
        border-bottom: $divider-border-width $divider-border-style $divider-border-color;
        margin: 0 $divider-padding;
        transform: translateY(#{$divider-border-width} / 2)
    }

    &:before {
        margin-left: 0;
    }

    &:after {
        margin-right: 0;
    }

    &[text-position="right"]:after,
    &[text-position="left"]:before {
        content: none;
    }
}

hier fummeln .

tao
quelle
Hallo, ich schätze dein Code-Snippet sehr. Wenn ich einen Text mit einem anderen Teiler als Englisch (in meinem Fall Koreanisch) einfüge, werden alle zwei Buchstaben die Zeilen unterbrochen. Könnten Sie herausfinden warum?
Kadenz
0

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}
<div>
   <hr> <span class="orSpan">OR</span>
</div>

Unter Umständen müssen Sie die einstellen Marge Eigenschaft

Srikrushna
quelle