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

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.

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/

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/

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/

Najkrótsza i najlepsza metoda:

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

<span> your text </span>

Oto rozwiązanie oparte na Flex.

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/

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

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>

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

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

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

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

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

<h1>side lines</h1>

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 .

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

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

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

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/

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!

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>

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/

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

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>

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

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