Dodaj wyśrodkowany tekst do środka podobnego wiersza
Zastanawiam się, jakie opcje ma się w xhtml 1.0 strict, aby utworzyć linię po obu stronach tekstu jak-tak:
Section one ----------------------- Next section ----------------------- Section two
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 pionowym, jak i poziomym):
<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>
To też ma problemy z wyrównaniem, które rozwiązuję tym bałaganem:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
Oprócz problemów z wyrównaniem, obie opcje czują się "fudgy" , a ja byłbym dużo jestem zobowiązany, jeśli zdarzyło ci się to wcześniej widzieć i znać eleganckie rozwiązanie.
30 answers
Flexbox jest rozwiązaniem:
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator:not(:empty)::before {
margin-right: .25em;
}
.separator:not(:empty)::after {
margin-left: .25em;
}
<div class="separator">Next section</div>
Obecnie każda przeglądarka obsługuje ją , a w razie potrzeby możesz zapewnić kompatybilność z dziesięcioletnimi przeglądarkami, dodając odpowiednie prefiksy dostawcy. I tak degradowałoby się z wdziękiem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-02-11 09:00:16
A może:
<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>
Zobacz to JSFiddle .
możesz użyć vw
lub %
, aby zareagować.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-18 15:18:21
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/
Linia podwójna
Aby utworzyć podwójną linię, użyj jednej z następujących opcji:
1) stała przestrzeń 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) Spacja 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)
Bazując na tym rozwiązaniu, dodałem SCSS "z właściwością koloru", jeśli może komuś pomóc...
//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 użycia:
//content.scss
h2 {
@include bg-strike($col1);
color: $col1;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-18 15:49:30
Można to osiągnąć za pomocą :before I: after bez znajomości szerokości kontenera lub koloru tła, a ich użycie pozwala na większą stylizację podziałów linii. Na przykład można to zmienić, aby tworzyć linie podwójne, linie przerywane itp.
Użycie 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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-30 15:41:33
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 .
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-18 15:20:50
Właśnie natknąłem się na ten sam problem, tutaj jest jeden sposób, aby go rozwiązać:
<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ć niezależnie od tego, jakie tło jest za nim.
Możesz spróbować tutaj: http://jsfiddle.net/88vgS/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-25 08:45:44
UPDATE: 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 HTML?
Użyłem line-height:0
aby stworzyć 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;
}
Kolejna dobra metoda jest na http://robots.thoughtbot.com/
Używa obrazu tła i unosi się, aby uzyskać fajny efekt
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:43
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-12 14:03:41
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-11 17:16:11
Jeśli możesz użyć CSS i chcesz użyć przestarzałego atrybutu align
, stylowy zestaw pól/legenda będzie działał:
<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>
Celem zestawu pól jest logiczne grupowanie pól formularza. Jak zauważył willoler, styl text-align: center
nie będzie działał dla elementów legend
. align="center"
jest przestarzałym HTML, ale powinien prawidłowo wyśrodkować tekst we wszystkich przeglądarkach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-11 17:37:42
Możesz po prostu użyć pozycji względnej i ustawić wysokość na rodzicu
.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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-11 17:18:27
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ład: https://jsfiddle.net/0Lkj6wd3/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-05-21 11:30:21
<fieldset style="border:0px; border-top:1px solid black">
<legend>Test</legend>
</fieldset>
Zły hack ...Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-11 17:10:34
Wpadam na 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;
}
A tutaj jest Skrzypek, 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-18 13:30:36
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-07 12:18:24
Woohoo mój pierwszy post mimo, że ma rok. Aby uniknąć problemów z kolorowaniem tła z opakowaniami, możesz użyć inline-block z hr (nikt tego nie powiedział wprost). Text-align powinno być wyśrodkowane poprawnie, ponieważ są elementami inline.
<div style="text-align:center">
<hr style="display:inline-block; position:relative; top:4px; width:45%" />
New Section
<hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-18 12:01:38
Używam h1
z rozpiętością w ś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 }
To proste.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-22 03:47:02
Patrząc na powyższe, zmieniłem na:
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>
Wygląda na to, że działa dobrze.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-12 01:43:12
Wzięcie rozwiązania @ kajic i umieszczenie stylizacji w CSS:
<table class="tablehr">
<td><hr /></td>
<td>Text!</td>
<td><hr /></td>
</table>
Następnie CSS (ale to zależy od CSS3 w użyciu n-tego selektora):
.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }
Zdrówko.
(P. S. na tbody i tr, Chrome, IE i Firefox przynajmniej automatycznie wstawia tbody i TR, dlatego moja próbka, podobnie jak @ kajic, nie uwzględniła tych, Aby zachować krótszy czas w wymaganym znaczniku html. Rozwiązanie to zostało przetestowane z najnowszymi wersjami IE, Chrome i Firefox (stan na 2013 rok).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-08 18:41:57
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; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-10 10:09:15
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ę 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-01 06:53:02
Zrobiłem fiddle , który używa FlexBox i również daje różne style HR (podwójna linia, symbole na środku linii, Cień, wstawka, przerywane, 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> </p>
<div class="divider right">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider center">
<hr />
<label>Welcome!</label>
<hr />
</div>
<p> </p>
<div class="divider left fixed">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider right fixed">
<hr />
<label>Welcome!</label>
</div>
<p> </p>
<div class="divider center fixed">
<hr />
<label>Welcome!</label>
<hr />
</div>
Lub tutaj jest interaktywne Skrzypce: http://jsfiddle.net/mpyszenj/439/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-15 01:57:11
Możesz to osiągnąć bez <hr />
. Semantycznie, projektowanie powinno być wykonane 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"> </div>
</div>
There ' s always The good old FIELDSET
fieldset
{
border-left: none;
border-right: none;
border-bottom: none;
}
fieldset legend
{
text-align: center;
padding-left: 10px;
padding-right: 10px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-21 19:12:59
Możesz spróbować wykonać fieldset
i wyrównać element "legenda" (Twój tekst "następna sekcja") do środka pola z ustawieniem tylko border-top
. Nie jestem pewien, jak legenda jest pozycjonowana zgodnie z elementem fieldset. Wyobrażam sobie, że to może być po prostu proste margin: 0px auto
, aby zrobić sztuczkę, chociaż.
Przykład:
<fieldset>
<legend>Title</legend>
</fieldset>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-13 08:49:17
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-23 17:25:48
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 modyfikować szerokość w klasach "side" i " middle "na podstawie długości tekstu w znaczniku"span". Upewnij się, że szerokość "środek" plus 2 razy szerokość "strona" równa 100%.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-02 13:05:48
Responsywne, przezroczyste tło, zmienna wysokość i styl dzielnika, zmienna pozycja 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
domyślnie jest to środek.
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>
I SCSS , aby zmodyfikuj go szybko:
$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;
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-12 22:06:57
.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żesz dostosować margines Właściwość
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-17 09:31:17
<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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-01 06:24:46