it-swarm.com.de

Fügen Sie zentrierten Text in der Mitte einer <hr /> - ähnliche Linie ein

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

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

Ich habe daran gedacht, ein paar ausgefallene Dinge zu tun:

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

Oder 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 Schlamassel lösen kann:

<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 "unecht" an, und ich wäre Ihnen sehr dankbar, wenn Sie dies zuvor schon einmal gesehen haben und eine elegante Lösung kennen.

167
Brian M. Hunt

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 vw oder % verwenden, um es ansprechend zu machen.

195
Fletcher Moore

Um dies zu lösen, ohne die Breite und die Hintergrundfarbe zu kennen, gehen Sie folgendermaßen vor:

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 zum Erstellen einer Doppelleitung eine der folgenden Optionen:

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 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 "with color property" 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;
}
176
MartinF

Sie können dies mit :: before und :: after erreichen, ohne die Breite des Containers oder der Hintergrundfarbe zu kennen und die Zeilenumbrüche stärker zu gestalten. Zum Beispiel kann dies geändert werden, um doppelte Linien, gepunktete Linien usw. zu erzeugen.

JSFiddle

CSS- und HTML-Verwendung:

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

61
Omniscience

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 .

Ich bin gerade auf das gleiche 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, d. H. Es wird unabhängig vom Hintergrund dahinter gut aussehen. 

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

21
Robert Kajic

Ich weiß nicht, ob das herausgefunden wurde, aber die Flexbox bietet eine 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;
}

Siehe http://jsfiddle.net/MatTheCat/Laut6zyc/ für eine Demo.

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

14
MatTheCat

UPDATE: Dies funktioniert nicht mit HTML5

Schauen Sie sich stattdessen diese Frage an, um weitere Techniken zu erhalten: CSS-Abfrage. Kann ich dies tun, ohne mehr HTML einzuführen?


Ich habe line-height:0 verwendet, um den Effekt in der Kopfzeile meiner Site zu erstellen guerilla-alumnus.com

<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 auf http://robots.thoughtbot.com/

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

10
willoller

Wenn Sie CSS verwenden können und bereit sind, das veraltete align-Attribut zu verwenden, funktioniert ein formatiertes Fieldset/eine 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 Fieldset besteht darin, Formularfelder logisch zu gruppieren. Wie willoler hervorhebt, funktioniert ein text-align: center-Stil für legend-Elemente nicht. align="center" ist veraltetes HTML, sollte aber den Text in allen Browsern richtig zentrieren.

6
Trey Hunner

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>

5
sidonaldson

Bootstrap-Gitter:

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

Einen 2 Jahre alten Beitrag aufstocken, aber so gehe ich mit nur einem Element und CSS an diese Situationen heran.

​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, um es auszuprobieren: http://jsfiddle.net/sRhBc/ (zufälliges Bild von Google für die Grenze genommen).

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

3
Lazar Vuckovic
<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

Böser Hack ...

3
Dänu

Hier ist eine einfache Lösung mit nur CSS, keine Hintergrund-Tricks ...

.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/

2
Yftach

Ich benutze einen h1 mit einem Span 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.

2
Youri

Ich habe eine Geige erstellt, die FlexBox verwendet und Ihnen verschiedene HR-Stile (doppelte Linie, Symbole in der Mitte der Linie, Schlagschatten, Einfügung, gestrichelte Linien usw.) geben wird.

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/

2
Jade

Wenn ich oben schaue, habe ich Folgendes geändert:

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.

2
user2673353

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

Dies funktionierte für mich und erfordert keine Hintergrundfarbe hinter dem Text, um eine Begrenzungslinie auszublenden. Stattdessen wird das eigentliche hr-Tag verwendet. Sie können mit den Breiten herumspielen, um verschiedene Längen von Stundenzeilen 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>
2
user3898371

Sie könnten versuchen, eine fieldset auszuführen und das "Legende" -Element (Ihr Text "nächster Abschnitt") in der Mitte des Felds auszurichten, wobei nur border-top gesetzt ist. Ich bin nicht sicher, wie eine Legende in Übereinstimmung mit dem Fieldset-Element positioniert wird. Ich kann mir vorstellen, dass es einfach ein einfacher margin: 0px auto ist, um den Trick auszuführen.

beispiel:

<fieldset>
      <legend>Title</legend>
</fieldset>
2
dclowd9901

Nehmen Sie die Lösung von @ kajic und setzen Sie das Styling in CSS:

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

Dann CSS (aber es hängt von CSS3 ab, wenn der n-te Selektor verwendet wird):

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

Prost.

(PS On tbody und tr, Chrome, IE und Firefox fügt zumindest automatisch ein tbody und ein tr ein, weshalb mein Beispiel wie @ kajic's diese nicht enthält, um die benötigte HTML-Datei kürzer zu halten Markup. Diese Lösung wurde mit den neuesten Versionen von IE, Chrome und Firefox (Stand 2013) getestet.

2

Woohoo mein erster Beitrag, obwohl dies ein Jahr alt ist. Um Hintergrundprobleme bei Wrappern zu vermeiden, können Sie Inline-Block mit hr verwenden (das hat niemand explizit gesagt). 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>
2
Jacob Block

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;
    }
2
Anit Garg

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;
 }
1
Chet at C2IT

Sie können dies ohne <hr /> erreichen. Semantisch sollte Design mit den Mitteln von CSS gemacht werden, in diesem Fall ist es 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>
1
user151323

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 der Klasse "side" und "middle" entsprechend der Länge Ihres Textes im Tag "span" ändern. Stellen Sie sicher, dass die Breite der "Mitte" plus das 2-fache der Breite der "Seite" 100% beträgt.

0
Betty Lee

Ansprechender, transparenter Hintergrund, variable Höhe und Stil des Teilers, variable Textposition, einstellbarer Abstand zwischen Teiler und Text Kann auch mehrfach mit verschiedenen Selektoren für mehrere Trennstile 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-position wird standardmäßig zentriert.

Demo: 

.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;
}
<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>

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

Geige hier .

0

Sie können einen Wrapperblock mit einem geeigneten Hintergrundbild erstellen (und auch eine Hintergrundfarbe für den zentrierten Textblock festlegen).

0
scaryzet