Technika CSS dla poziomej linii ze słowami na środku


286

Próbuję wprowadzić poziomą regułę z tekstem pośrodku. Na przykład:

----------------------------------- mój tytuł tutaj ------------ -----------------

Czy jest na to sposób w CSS? Bez wszystkich myślników „-” oczywiście.


Czy to w środku formtagu?
thirtydot

w takim przypadku, jak wskazał trzydziesty w odpowiedzi na moją odpowiedź, warto sprawdzić elementy fieldsetilegend
Stephan Muller,


Aby uzyskać rozwiązanie na przezroczystym tle , zobacz Linia przed i po wyśrodkowanym tekście na przezroczystym tle
web-tiki

Odpowiedzi:


404

Z grubsza tak to zrobiłbym: linia jest tworzona przez ustawienie border-bottomna zawierającym, h2a następnie podanie h2mniejszego line-height. Tekst jest następnie umieszczany w zagnieżdżonym spanz nieprzezroczystym tłem.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}
<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

Testowałem tylko w Chrome, ale nie ma powodu, aby nie działał w innych przeglądarkach.

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


3
To jest moje ulubione rozwiązanie. Działa również na OSX, a niektóre inne nie. Jeśli użyjesz tego rozwiązania, pamiętaj o ustawieniu tła zakresu na ten sam kolor co tło strony, będzie to szczególnie oczywiste, co mam na myśli, jeśli twoje tło nie jest białe. ;)
DrLazer,

1
jakikolwiek sposób, aby zrobić to około jednej czwartej drogi?
Troy Cosentino

1
Pobierz tekst wcięty od lewej strony, używając „text-align: left; text-wcięcie: 40px;” w stylu h2.
Matt__C

14
Nie jest to elastyczne, ponieważ naprawiasz kolor tła tekstu jako biały.
Chao

2
@NateBarbettini Chyba że linia, którą próbujesz to zrobić, a tekst musi mieć przezroczyste tło dla innych rzeczy za tym.
Coburn,

266

Po wypróbowaniu różnych rozwiązań, przyjechałem z jednym ważnym dla różnych szerokości tekstu, dowolnego możliwego tła i bez dodawania dodatkowych znaczników.

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}
<h1>Heading</h1>
<h1>This is a longer heading</h1>

Testowałem to w IE8, IE9, Firefox i Chrome. Możesz to sprawdzić tutaj http://jsfiddle.net/Puigcerber/vLwDf/1/


2
Ten też mi się najbardziej podoba. Aby uzyskać styl, w którym tekst jest wcięty od lewej zamiast wyśrodkowany, użyj tej zmiany: h1 { overflow: hidden; `text-align: left; `wcięcie tekstu: 40px; `}
Matt__C

9
To naprawdę dobre rozwiązanie; zwłaszcza, że ​​działa na dowolnym tle i nie wymaga ustawionej szerokości elementu nagłówka.
Łukasza

2
To jest świetne. Dostosowałem trochę twój kod, aby wyrównać tekst do lewej i ustawić :afterszerokość elementu w bloku. Jestem ciekaw: jaka dokładnie jest rola margin-right: -50%? Gdy szukałem kodu, brak tej właściwości spowodowałby, że dekoracja przełamałaby się do innej linii. I nawet gdy :afterjest przypisana 100% szerokości, nadal potrzebuję ujemnego marginesu po prawej stronie 50%, aby go dopasować. Czemu?
BeetleTheNeato

Jak rozumiem, dodanie ujemnych marginesów po obu stronach pociąga element w obu kierunkach, dlatego jest centrowany.
Puigcerber,

2
Jedną z rzeczy, które uwielbiam w tym rozwiązaniu jest to, że działa w sytuacjach, w których nie wiesz, jaki jest kolor tła. Jak dotąd najlepsze rozwiązanie tego problemu.
JoeMoe1984,

54

Ok, ten jest bardziej skomplikowany, ale działa we wszystkim oprócz IE <8

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

Elementy: before i: after są pozycjonowane absolutnie, dzięki czemu możemy pociągnąć jeden w lewo, a drugi w prawo. Ponadto szerokość (w tym przypadku 40%) jest bardzo zależna od szerokości tekstu w środku. Pomyśl o tym. Przynajmniej top: 1.2emupewnia się, że linie pozostają mniej więcej na środku tekstu, nawet jeśli masz inny rozmiar czcionki.

Wydaje się jednak, że działa dobrze: http://jsfiddle.net/tUGrf/3/


3
Są sprytne, ale mam nadzieję, że OP nie chce tego w formtagu. Jeśli tak, jak jestem pewien, mógłby po prostu użyć fieldseti legend.
thirtydot

1
Heh, masz rację. Może i tak pójdzie, jeśli to nie zadziała ... nie jest poprawne semantycznie, ale jest lepsze niż konieczność uciekania się do javascript dla czegoś takiego jak ten imo.
Stephan Muller,

8
Najlepszym rozwiązaniem, jakie znalazłem, które działa dobrze, gdy ekran jest ustawiony na stałe
Xavier John

Tak @ Xavier-John, to moja odpowiedź ;)
Puigcerber

43

Najkrótsza i najlepsza metoda:

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


4
Powinieneś dodać opis tego, co robi twój kod, chyba że chcesz go usunąć.
inf3rno

W moim przypadku linia wydawała się trochę za gruba, więc zhakowałem ją, przypisując inną rodzinę czcionek: font-family: monospace;działało dobrze.
Mikhail Vasin

38

Oto rozwiązanie oparte na Flex.

Nagłówek z centralną poziomą linią po bokach

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}
<h1>Today</h1>

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


Jak zdobyć padding?
Sylar

szybkie i brudne, możesz dodać & nbsp;
chrismarx,

1
Używam innego elementu: <h1><span>Today</span></h1>z marginesem / wypełnieniem na rozpiętości.
Jesse Buitenhuis

19

na później (Nowdays) przeglądarce display:flexandd pseudo-elements ułatwia rysować. border-style, box-shadowa nawet backgroundpomaga w makijażu. demo poniżej

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}
<h1>side lines via flex</h1>


Dziękuję za to, bardzo zręczny!
Jimmy Obonyo Abor

Idealne, jedyne rozwiązanie, które działało dla mnie, gdy tło było obrazem
cjohansson

12

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


9
<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

Dodaj zakres, aby zwiększyć odstęp między tekstem a linią.

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


1
Fajnie, jedynym problemem jest to, że musisz ustawić tło na białe i nie możesz ustawić przezroczystości.
Marnix,

w takim przypadku będziesz musiał pracować z dwoma liniami, po jednej z każdej strony. To będzie trudne do osiągnięcia w czysty sposób ..
Stephan Muller

Mój ulubiony podejście do tej pory, ale niestety to nie działa w programach pocztowych z jakiegoś powodu (Gmail mobile & web)
reedwolf

9

Rozglądałem się za niektórymi rozwiązaniami dla tej prostej dekoracji i znalazłem kilka takich, niektóre dziwne, niektóre nawet z JS, aby obliczyć wysokość czcionki i bla, bla, bla, a potem przeczytałem jeden na ten post i przeczytaj komentarz z thirtydot mówiąc o fieldset, a legend, a ja myślałem, że to było.

Zastępuję te 2 elementy, myślę, że możesz skopiować dla nich standardy W3C i dołączyć je do swojej .middle-line-textklasy (lub jakkolwiek chcesz to nazwać), ale to właśnie zrobiłem:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

Oto skrzypce: http://jsfiddle.net/legnaleama/3t7wjpa2/

Grałem ze stylami ramek i działa również na Androidzie;) (Testowane na KitKat 4.XX)

EDYTOWAĆ:

Zgodnie z pomysłem Bekerova Artura, który również jest fajną opcją, zmieniłem obraz base64 .png, aby utworzyć obrys za pomocą .SVG, aby można było renderować w dowolnej rozdzielczości, a także zmieniać kolor elementu bez żadnego innego oprogramowania :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

5

Rozwiązanie dla IE8 i nowszych ...

Zagadnienia, na które warto zwrócić uwagę:

Za pomocą background-color maskowania obramowania może nie być najlepszym rozwiązaniem. Jeśli masz złożony (lub nieznany) kolor tła (lub obraz), maskowanie ostatecznie się nie powiedzie. Ponadto, jeśli zmienisz rozmiar tekstu, zauważysz, że białe tło (lub cokolwiek ustawisz) zacznie zakrywać tekst w linii powyżej (lub poniżej).

Nie chcesz też „zgadywać”, jak szerokie są te sekcje, ponieważ powoduje to, że style są bardzo nieelastyczne i prawie niemożliwe do wdrożenia w responsywnej witrynie, w której zmienia się szerokość treści.

Rozwiązanie:

( Zobacz JSFiddle )

Zamiast „maskować” obramowanie za pomocą background-color, użyj swojej displaywłaściwości.

HTML

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

Zmień rozmiar tekstu, umieszczając font-sizewłaściwość na .groupelemencie.

Ograniczenia:

  • Brak tekstu wielowierszowego. Tylko pojedyncze linie.
  • Znaczniki HTML nie są tak eleganckie
  • topwłaściwość .lineelementu musi wynosić połowę line-height. Tak więc, jeśli masz line-heightz 1.5em, wówczas toppowinno być -.75em. Jest to ograniczenie, ponieważ nie jest zautomatyzowane, a jeśli stosujesz te style do elementów o różnych wysokościach linii, może być konieczne ponowne zastosowanie swojego line-heightstylu.

Dla mnie te ograniczenia przeważają nad „problemami”, które zauważyłem na początku mojej odpowiedzi dla większości wdrożeń.


Działa na chromie. Wydaje się semantyczny i dość prosty. Działa z bootstrap.
Jeff Ancel

Musiałem dodać zwinięcie ramki: oddzielne do .group, ponieważ używam go w stanie, który ma inne ustawienie. Działa świetnie.
Brian MacKay

5

Daje to stałą długość linii, ale działa świetnie. Długości linii są kontrolowane przez dodanie lub pobranie „\ 00a0” (przestrzeń Unicode).

wprowadź opis zdjęcia tutaj

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


2

Jeśli ktoś zastanawia się, jak ustawić nagłówek tak, aby pojawiał się ze stałą odległością do lewej strony (a nie wyśrodkowaną, jak pokazano powyżej), zorientowałem się, modyfikując kod @ Puigcerber.

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

Tutaj JSFiddle .


2
h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

to ci pomoże


między linią

<h6 class = "background"> ​​<span> <br> NASZE USŁUGI </span> </h6> to jest kod HTML
Dominic Amal Joe F

Joe, możesz edytować własną odpowiedź, aby dodać kod HTML - znacznie lepiej niż umieszczanie go w komentarzach. Powinieneś również dodać wyjaśnienie do odpowiedzi.
Mogsdad,

Przepraszam, Mogsdad Zapomniałem wstawić kod HTML, dlatego go tutaj umieściłem.
Dominic Amal Joe F,

2

Korzystam z układu tabeli, aby dynamicznie wypełniać boki i div-bezwzględnej wysokości 0 div dla dynamicznego pozycjonowania pionowego:

wprowadź opis zdjęcia tutaj

  • brak zakodowanych wymiarów
  • brak zdjęć
  • bez pseudoelementów
  • szanuje tło
  • wygląd paska kontrolnego

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

Przekonałem się, że nieco poniżej prawdziwego centrum najlepiej wygląda tekst; można to ustawić tam, gdzie 55%jest (wyższa wysokość powoduje obniżenie paska). Wygląd linii można zmienić tam, gdzie border-bottomjest.

HTML:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

2

Nie po to, żeby pobić martwego konia, ale szukałem rozwiązania, znalazłem się tutaj i sam nie byłem zadowolony z dostępnych opcji, nie tylko z jakiegoś powodu, że nie byłem w stanie uzyskać dostarczonych tu rozwiązań, aby działały dla mnie dobrze. (Prawdopodobnie z powodu błędów z mojej strony ...) Ale bawiłem się Flexboksem i oto coś, co sam zacząłem pracować.

Niektóre ustawienia są podłączone na stałe, ale tylko w celach demonstracyjnych. Sądzę, że to rozwiązanie powinno działać w każdej nowoczesnej przeglądarce. Po prostu usuń / dostosuj stałe ustawienia dla klasy .flex-rodzic, dostosuj kolory / tekst / rzeczy i (mam nadzieję) będziesz równie szczęśliwy jak ja dzięki takiemu podejściu.

HTML:

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}
<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

Zapisałem również moje rozwiązanie tutaj: https://jsfiddle.net/Wellspring/wupj1y1a/1/


1

Na wszelki wypadek IMHO najlepszym rozwiązaniem wykorzystującym CSS jest Flexbox.

Oto przykład:

.kw-dvp-HorizonalButton {
    color: #0078d7;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
}
.kw-dvp-HorizonalButton:before, .kw-dvp-HorizonalButton:after {
    background-color: #0078d7;
    content: "";
    display: inline-block;
    float:left;
    height:1px;
}
.kw-dvp-HorizonalButton:before {
    order:1;
    flex-grow:1;
    margin-right:8px;
}
.kw-dvp-HorizonalButton:after {
    order: 3;
    flex-grow: 1;
    margin-left: 8px;
}
.kw-dvp-HorizonalButton * {
    order: 2;
}
    <div class="kw-dvp-HorizonalButton">
        <span>hello</span>
    </div>

Powinno to zawsze skutkować idealnie wyśrodkowaną, wyrównaną zawartością z linią po lewej i prawej stronie, z łatwym do kontrolowania marginesem między linią a treścią.

Tworzy element liniowy przed i za najwyższą kontrolą i ustawia, aby zamawiał 1,3 w kontenerze elastycznym, jednocześnie ustawiając zawartość jako porządek 2 (przejdź na środku). Podanie przed / po wzroście o 1 spowoduje, że zajmą one najbardziej wolne miejsce w równym stopniu, jednocześnie utrzymując zawartość w centrum.

Mam nadzieję że to pomoże!


0

Nie jestem zbyt pewien, ale możesz spróbować użyć poziomej reguły i przesunąć tekst powyżej jego górnego marginesu. Będziesz potrzebował stałej szerokości tagu akapitu i tła. Jest trochę zuchwały i nie wiem, czy będzie działał na wszystkich przeglądarkach, i musisz ustawić ujemny margines na podstawie rozmiaru czcionki. Działa na Chrome.

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

<hr><p>def</p>

0

Wypróbowałem większość sugerowanych sposobów, ale kończy się to pewnymi problemami, takimi jak pełna szerokość lub Nie nadaje się do zawartości dynamicznej. W końcu zmodyfikowałem kod i działa idealnie. Ten przykładowy kod narysuje te linie przed i po i jest elastyczny w zakresie zmiany treści. Wyrównany do środka.

HTML

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

Wynik: https://jsfiddle.net/fasilkk/vowqfnb9/


0

Dla mnie to rozwiązanie działa idealnie dobrze ...

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}

0

Ludzie używający Bootstrap 4 mogą osiągnąć tę metodę. klasy wymienione w kodzie HTML pochodzą z Bootstrap 4.

h1 {
    position: relative;
    flex-grow: 1;
    margin: 0;
}

h1:before {
   content: "";
   display: block;
   border-top: solid 2px blue;
   width: 100%;
   height: 1px;
   position: absolute;
   top: 50%;
   z-index: 1;
 }
 h1 span {
   background: #fff;
   left: 12%;
   padding: 0 15px;
   position: relative;
   z-index: 5;
 }

I napisz swój HTML w ten sposób

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

0

Pozioma i pionowa linia ze słowami na środku

.box{
    background-image: url("https://i.stack.imgur.com/N39wV.jpg");
    width: 350px;
    padding: 10px;
}

/*begin first box*/
.first{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 0 2px 0 2px;
    border-color: red;
    border-style: solid;
    position: relative;
}

.first span {
    position: absolute;
    display: flex;
    right: 0;
    left: 0;
    align-items: center;
}
.first .foo{
    top: -8px;
}
.first .bar{
    bottom: -8.5px;
}
.first span:before{
    margin-right: 15px;
}
.first span:after {
    margin-left: 15px;
}
.first span:before , .first span:after {
    content: ' ';
    height: 2px;
    background: red;
    display: block;
    width: 50%;
}


/*begin second box*/
.second{
    width: 300px;
    height: 100px;
    margin: 10px;
    border-width: 2px 0 2px 0;
    border-color: red;
    border-style: solid;
    position: relative;
}

.second span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.second .foo{
    left: -15px;
}
.second .bar{
    right: -15.5px;
}
.second span:before{
    margin-bottom: 15px;
}
.second span:after {
    margin-top: 15px;
}
.second span:before , .second span:after {
    content: ' ';
    width: 2px;
    background: red;
    display: block;
    height: 50%;
}
<div class="box">
    <div class="first">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>

   <br>

    <div class="second">
        <span class="foo">FOO</span>
        <span class="bar">BAR</span>
    </div>
</div>

Odpowiedź na to pytanie znajduje się również w https://stackoverflow.com/a/57279326/6569224


-1
  • Utworzono mały obraz 1x18 z pojedynczą kropką koloru # e0e0e0
  • Przekształcił obraz w kod base64

Wynik:

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}
<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.