Dodaj wyśrodkowany tekst na środku linii podobnej do <hr />

217

Zastanawiam się, jakie opcje ma jeden w xhtml 1.0 strict, aby utworzyć linię po obu stronach tekstu w podobny sposób:

Sekcja pierwsza
----------------------- Następna sekcja -----------------------
Sekcja druga

Myślałem o zrobieniu takich fantazyjnych rzeczy:

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

Lub alternatywnie, ponieważ powyższe ma problemy z wyrównaniem (zarówno w pionie, jak i w poziomie):

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

Ma to również problemy z wyrównaniem, które rozwiązuję za pomocą tego bałaganu:

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

Oprócz problemów związanych z wyrównaniem obie opcje wydają się „niewyraźne” i byłbym bardzo zobowiązany, gdybyś widział to wcześniej i wiedział o eleganckim rozwiązaniu.

Brian M. Hunt
źródło
3
Oto kolejny wątek z wyzwaniem bez dodatkowych tagów - i rozwiązanie! stackoverflow.com/questions/12648513/…
willoller
1
stackoverflow.com/questions/5214127/... jest nadal najlepszym rozwiązaniem.
Przydatną odpowiedzią byłoby zastosowanie CSS Grid.
Brian M. Hunt
Dodano odpowiedź (SCSS), która przekształca prawie każdy element w dzielnik bez ustawionego tła i umożliwia ustawienie: kolor i styl obrysu (jednolity, kropkowany, przerywany) dzielnika, położenie tekstu (lewy, prawy, środkowy), a także klasa, która to stosuje (domyślnie .divider).
tao
Biorąc pod uwagę bieżące wsparcie dla Flexboksa, myślę, że moja odpowiedź może zyskać trochę widoczności.
MatTheCat

Odpowiedzi:

64

Nie wiem, czy to wymyślono, ale Flexbox oferuje całkiem rozwiązanie:

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

Zobacz http://jsfiddle.net/MatTheCat/Laut6zyc/ celu uzyskania wersji demonstracyjnej.

Dzisiaj kompatybilność nie jest taka zła (można dodać wszystkie stare składnie Flexboksa) i z wdziękiem się pogarsza.

MatTheCat
źródło
Najlepsza odpowiedź, biorąc pod uwagę wsparcie dla Flexbox w dzisiejszych czasach
akivajgordon
to miłe rozwiązanie
Smaillns
217

Co powiesz na:

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

Sprawdź to JSFiddle .

Możesz użyć vwlub, %aby reagować .

Fletcher Moore
źródło
2
Uzyskanie dokładnej najwyższej wartości jest nieco trudne. To nie jest dokładnie -0,5 em;
Mitar
idealny. „Responsive” też
JimXC
4
Zobacz moją odpowiedź na rozwiązanie, które nie wymaga określenia koloru tła ani szerokości.
MartinF
Zobacz moją odpowiedź na responsywne, przejrzyste bg, zmienny styl i wysokość dzielnika, zmienne położenie tekstu. Może być również stosowany więcej niż jeden raz do różnych selektorów, aby mieć więcej niż jeden styl dzielnika w tym samym projekcie, używając SCSS. Działa z każdym font-size.
tao
193

Sposób rozwiązania tego problemu bez znajomości szerokości i koloru tła jest następujący:

Struktura

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

Przykład: http://jsfiddle.net/z8Hnz/

Podwójna linia

Aby utworzyć podwójną linię, użyj jednej z następujących opcji:

1) Naprawiono odstęp między liniami

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

Przykład: http://jsfiddle.net/z8Hnz/103/

2) Niestandardowa przestrzeń między wierszami

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

Przykład: http://jsfiddle.net/z8Hnz/105/


Wersja SASS (SCSS)

W oparciu o to rozwiązanie dodałem SCSS „z właściwością koloru”, jeśli może to pomóc komuś ...

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

przykład zastosowania:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}
MartinF
źródło
Ta wersja działa lepiej, jeśli używasz obrazu dla linii - a przynajmniej łatwiej jest edytować i pozostać responsywnym
tehlivi
Bardzo dobra robota! Czy potrafisz użyć swojej magii do stworzenia podwójnej linii? (W przeciwnym razie skorzystam z małego, powtarzającego się obrazu tła.)
wloescher,
3
Świetny urywek! Dzięki :)
plong0
2
To najlepsza odpowiedź, ponieważ zadziała bez ustawiania tła, a kiedy trzeba ustawić przezroczyste tło
Dinesh Dabhi
1
Pierwszy przykład jest po prostu niesamowity! Gratulacje! To powinna być poprawna odpowiedź!
Luiz Eduardo
87

Możesz to zrobić za pomocą :: before i :: after, nie znając szerokości kontenera lub koloru tła, i aby uzyskać lepszą stylizację podziałów linii. Na przykład można to zmodyfikować, aby uzyskać podwójne linie, linie kropkowane itp.

JSFiddle

Wykorzystanie CSS i HTML:

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

Wersja SCSS:

.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;
    }
}
Wszechwiedza
źródło
1
Eleganckie rozwiązanie, choć ma jedno zastrzeżenie: jeśli nie będzie tekstu, nadal będziesz mieć odstęp między wierszami.
Farside,
13
Jest to najczystsze rozwiązanie w tym wątku, szczerze mówiąc, problemu bez tekstu można przeoczyć, ponieważ zawsze chciałbyś mieć dzielnik z tekstem.
Robert
51

Spróbuj tego:

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

Podgląd na żywo na jsFiddle .

Diodeus - James MacFarlane
źródło
4
Działa idealnie i używa <hr />, więc co może być nie tak z tą odpowiedzią? Nic nie mówię.
Kirby,
4
+1 Nie musisz zadzierać z kolorem tła ani używać tagów w niezamierzony sposób. Jednym minusem jest to, że .divider hrszerokość zależy od długości tekstu. Sugestia: .divideri .divider hrszerokości należy podać w emjednostkach. Aby uzyskać hrszerokość, użyj ( .dividerszerokość minus # znaków) / 2.
Kelvin
12
To nie jest najlepsze rozwiązanie. Co jeśli nie masz pewności co do szerokości tekstu. Wszystko zostanie zrujnowane, gdy tekst będzie dłuższy.
Iwona Trąbka
To jest najlepsza i najprostsza odpowiedź
ha9u63ar
1
40% się tutaj myli. Jeśli tekst jest dłuższy, byłby źle dopasowany
TomSawyer
21

Właśnie natrafiłem na ten sam problem, oto jeden ze sposobów jego rozwiązania:

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

Działa bez ustawiania tła na elemencie tekstowym, tzn. Będzie dobrze wyglądać bez względu na to, jakie tło jest za nim.

Możesz to wypróbować tutaj: http://jsfiddle.net/88vgS/

Robert Kajic
źródło
Nie rozwiązuje problemu PO. To tworzy dwie linie z tekstem między nimi. Chce linii, która jest w połowie przerywana i ma tekst w przerywanej sekcji, a następnie linia będzie kontynuowana.
Dracorat
2
W rzeczywistości robi to, o co prosi OP. Można to zobaczyć na stronie jsfiddle.net/88vgS
Robert Kajic,
A także, co to jest linia podzielona w połowie, z tekstem w części łamanej, jeśli nie dwie linie z tekstem między nimi?
Robert Kajic
Powinieneś wrzucić tam odpowiednie tagi TR. Myślę, że to mnie na chwilę pomieszało. Z początku myślałem, że z trzech powodów, a nie trzech kolumn. Prawidłowe znaczniki prawdopodobnie nie spowodowałyby, żebym tak to zobaczył. Niezależnie od tego jest to z pewnością wykonalne rozwiązanie.
Dracorat
1
Ale korzysta z tabel, co jest NIEDOZWOLONE! Och, tylko żartuję. GRIDS ma swoje miejsce, prawie wszystkie inne frameworki GUI XML to rozpoznają i używają ich wszędzie (np. WPF / XAML). Dzięki za kolego z rozwiązania! Zasługuje to na więcej niż 3 głosy w górę. Podejrzewam, że przeszkodą będzie niechęć ludzi do znienawidzonych stołów.
Nicholas Petersen
10

AKTUALIZACJA: To nie będzie działać przy użyciu HTML5

Zamiast tego sprawdź to pytanie, aby uzyskać więcej technik: wyzwanie CSS, czy mogę to zrobić bez wprowadzania więcej kodu HTML?


Kiedyś line-height:0tworzyłem efekt w nagłówku mojej strony 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;
}

Inną dobrą metodą jest http://robots.thoughtbot.com/

Używa obrazu tła i unosi się, aby uzyskać fajny efekt

willoller
źródło
1
Podoba mi się, wygląda świetnie na twojej stronie, ale nie mogłem go uruchomić (podejrzewam, że zakłóca go jQuery css). :( Ale to jest naprawdę fajne.
Brian M. Hunt
Myślę, że twój h1 przesuwa zakres w dół.
imns
1
Jest to „hack”, który wykorzystuje różne zachowanie renderowania dla DOCTYPE XTHML 1.0 Transitional. Jeśli użyjesz html DOCTYPE (dla HTML5), NIE zadziała.
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
źródło
6

Jeśli możesz używać CSS i chcesz użyć przestarzałego alignatrybutu, będzie działał stylizowany zestaw pól / legenda:

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

Zamierzonym celem zestawu pól jest logiczne grupowanie pól formularza. Jak zauważył willoler, text-align: centerstyl dla nie będzie działał dla legendelementów. align="center"jest przestarzałym kodem HTML, ale powinien poprawnie wyśrodkować tekst we wszystkich przeglądarkach.

Trey Hunner
źródło
Bardziej szczegółowe wyjaśnienie, o co mi chodziło.
dclowd9901
Jestem prawie pewien, <legend>nabiera cech eksponowanie blocklub inline-blockelementu, ponieważ może on być wyściełane i depozytu zabezpieczającego, co oznacza text-align:centernie powinno praca ...
dclowd9901
tak, legendy świetnie nadają się do semantyki - używam ich do owijania grup radiowych, ale są uparte
willoller
Poprawiłem swoją odpowiedź. Niestety, ze względu na upór niektórych przeglądarek w stylizowaniu tego legendelementu, align="center"jest to jedyne rozwiązanie, które mogę znaleźć, które niezawodnie wyśrodkowuje legend.
Trey Hunner,
6

Siatka bootstrap:

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
źródło
1
vertical-centerKlasa już nie istnieje w bootstrap (4.3.1). Czy możesz zaktualizować swoją odpowiedź, aby powiedzieć align-items-center?
Cameron Hudson,
5

Możesz po prostu użyć względnego położenia i ustawić wysokość nadrzędnego

.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
źródło
5

Oto proste rozwiązanie tylko z css, bez sztuczek w tle ...

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

przykładowe skrzypce: https://jsfiddle.net/0Lkj6wd3/

Yftach
źródło
Świetne rozwiązanie wielokrotnego użytku, takie jak klasa użyteczności.
Vignesh,
3
<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

Zły hack ...

Dänu
źródło
1
Nie nazwałbym tego hackem, ale sprawdziłbym, czy działa we wszystkich przeglądarkach, które zamierzasz obsługiwać.
Nick Larsen
zestaw terenowy
3

Wysadzam 2-letni post, ale oto jak podchodzę do tych sytuacji, używając tylko jednego elementu i CSS.

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

Oto skrzypce, aby to sprawdzić: http://jsfiddle.net/sRhBc/ (losowe zdjęcie z Google zrobione dla granicy).

Jedyną wadą tego podejścia jest to, że nie obsługuje IE7.

Lazar Vuckovic
źródło
3

Po prostu użyj

    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
źródło
2

Woohoo mój pierwszy post, mimo że ma już rok. Aby uniknąć problemów z kolorem tła w opakowaniach, możesz użyć bloku wstawiania z hr (nikt tego wyraźnie nie powiedział). Wyrównanie tekstu powinno być wyśrodkowane poprawnie, ponieważ są elementami wbudowanymi.

<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
źródło
2

Używam h1z rozpiętością na środku.

Przykład HTML:

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

Przykład CSS:

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

Proste.

Youri
źródło
Witamy w StackOverflow, Youri. Zamiast a span, możesz rozważyć użycie div. Służy temu samemu celowi, z tym wyjątkiem, że jest to oczywiście element blokowy. :)
Nix
@Nix Blokować element wewnątrz elementu wbudowanego? Nie, dziękuję, rozpiętość jest dobrym wyborem
Jonathan Azulay
1
@MrAzulay h1jest elementem wbudowanym. spanjest miłe dla owijania rzeczy, ale powodem Wolę divw tym przypadku, to dlatego, Youri użycie CSS ustawić spansię display:block;. Nie widzę sensu przekształcania elementu wbudowanego w element blokowy, gdy dostępne są odpowiednie elementy blokowe ( div).
Nix
@Nix Czy to nie jest dość powszechne? Umieszczanie bloków wewnątrz linii jest złą praktyką. To jest dobry post na ten temat skypoetsworld.blogspot.se/2008/10/…
Jonathan
Ups, wpisałem błędnie mój najnowszy komentarz. Zgadzam się, że nie powinieneś umieszczać bloku wewnątrz elementu wbudowanego, ale h1tak naprawdę jest to element BLOKU. Przepraszam za zamieszanie. Nadal nie widzę sensu przekształcania elementu spanw blok, ale wystarczająco sprawiedliwie.
Nix,
2

Patrząc wyżej, zmodyfikowałem:

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>

Wydaje się, że działa dobrze.

użytkownik2673353
źródło
2

Biorąc rozwiązanie @ kajic i umieszczając stylizację w CSS:

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

Następnie CSS (ale to zależy od CSS3 przy użyciu n-tego selektora):

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

Twoje zdrowie.

(PS Na tbody i tr, Chrome, IE i Firefox przynajmniej automatycznie wstawiają tbody i tr, i dlatego moja próbka, jak @ kajic's, nie zawierała ich, aby skrócić czas wymaganego znacznika HTML. To rozwiązanie był testowany z najnowszymi wersjami IE, Chrome i Firefox, od 2013).

Nicholas Petersen
źródło
2

STRONA DEMO

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
źródło
2

To działało dla mnie i nie wymaga koloru tła za tekstem, aby ukryć linię graniczną, zamiast tego używa rzeczywistego znacznika hr. Możesz bawić się z szerokościami, aby uzyskać różne rozmiary linii hr.

<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>
użytkownik3898371
źródło
2

Zrobiłem skrzypce które używają FlexBox, a także dam ci różne style HR (podwójna linia, symbole na środku linii, cień, wstawka, przerywnik itp.).

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>

Lub tutaj jest interaktywny Fiddle: http://jsfiddle.net/mpyszenj/439/

Jadeit
źródło
2

Możesz spróbować zrobić fieldseti wyrównać element „legenda” (tekst „następnej sekcji”) do środka pola, używając tylko border-topzestawu. Nie jestem pewien, jak legenda jest pozycjonowana zgodnie z elementem zestawu pól. Wyobrażam sobie, że to może być prostemargin: 0px auto wykonanie tej sztuczki .

przykład:

<fieldset>
      <legend>Title</legend>
</fieldset>
dclowd9901
źródło
1

Możesz to osiągnąć bez <hr />. Semantycznie projektowanie powinno odbywać się za pomocą CSS, w tym przypadku jest to całkiem możliwe.

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>

źródło
1

Zawsze jest dobry stary FIELDSET

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }
Chet w C2IT
źródło
Zestawy pól powinny być używane tylko z formularzami.
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
źródło
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>

Możesz zmodyfikować szerokość w klasie „side” i „middle” w zależności od długości tekstu w znaczniku „span”. Upewnij się, że szerokość „środka” plus 2-krotność szerokości „boku” równa 100%.

Betty Lee
źródło
0

Czułe, przezroczyste tło, zmienna wysokość i styl dzielnika, zmienne położenie tekstu, regulowana odległość między dzielnikiem a tekstem. Może być również stosowany wielokrotnie z różnymi selektorami dla wielu stylów dzielników w tym samym projekcie.
SCSS poniżej.

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

Bez text-position tego domyślnie wyśrodkuje.

Próbny:

I SCSS , aby szybko go zmodyfikować:

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

bawić się tutaj .

tao
źródło
Cześć, naprawdę doceniam twój fragment kodu. Jeśli wstawię tekst z dzielnikiem innym niż angielski (w moim przypadku koreański), teksty łamią się co dwie litery. Czy możesz dowiedzieć się, dlaczego?
cadenzah
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>

Może być konieczne dostosowanie właściwości depozytu zabezpieczającego

Srikrushna
źródło
0
<div class="divider-line-x"><span>Next section</span></div>
/***** Divider *****/

.divider-line-x {
    position: relative;
    text-align: center; 
    font-family: Arial; 
    font-weight: bold;
    font-size: 12px;    
    color: #333;
    border-bottom: 1px dashed #ccc;
}

.divider-line-x span {
    position: relative; 
    top: 10px;
    padding: 0 25px;    
    background: #fff;
}
bałagan
źródło