Ortada kelimeler olan yatay bir çizgi için CSS tekniği

Ben ortada bazı metinler ile yatay bir kural yapmaya çalışıyorum. Örneğin:

----------------------------------- başlığım burada ------------ -----------------

Bunu CSS'de yapmanın bir yolu var mı? Açıkçası tüm "-" çizgileri olmadan.

Bu yapardım kabaca böyledir: satır bir ayarlayarak oluşturulur border-bottomiçeren üzerinde h2daha sonra veren h2küçük line-height. Metin daha sonra spansaydam olmayan bir arka plana sahip bir iç içe yerleştirilir .

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>

Yalnızca Chrome'da test ettim, ancak diğer tarayıcılarda çalışmaması için hiçbir neden yok.

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

Farklı çözümler denedikten sonra, farklı metin genişlikleri, olası herhangi bir arka plan ve ekstra işaretleme eklemeden geçerli bir tane ile geldim.

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>

IE8, IE9, Firefox ve Chrome'da test ettim. Buradan kontrol edebilirsiniz http://jsfiddle.net/Puigcerber/vLwDf/1/

Tamam, bu daha karmaşık ama IE <8 dışında her şeyde çalışıyor

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

: Before ve: after öğeleri kesinlikle konumlandırılmıştır, böylece birini sola ve diğerini sağa çekebiliriz. Ayrıca, genişlik (bu durumda% 40) içindeki metnin genişliğine çok bağlıdır .. bunun için bir çözüm düşünmek zorundadır. En azından top: 1.2emfarklı yazı tipi boyutunuz olsa bile satırların metnin merkezinde az ya da çok kalmasını sağlar.

Yine de iyi çalışıyor gibi görünüyor: http://jsfiddle.net/tUGrf/3/

En kısa ve en iyi yöntem:

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

<span> your text </span>

İşte Flex tabanlı çözüm.

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/

daha sonraki (günümüzde) tarayıcı için, display:flexandd pseudo-elements çizmeyi kolaylaştırır. border-style, box-shadowVe hatta backgroundmakyaj için çok yardımcı olur.

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

Metin ve çizgi arasında daha fazla yer açmak için yayılma alanına bir dolgu verin.

Örnek: http://jsfiddle.net/tUGrf/

Bu basit dekorasyon için bazı çözümler arıyordum ve yazı tipi ve bla, bla, bla yüksekliğini hesaplamak için JS ile bile birkaç tane, bazıları garip, bazıları buldum, sonra okudum Bu yazı üzerine bir ve bir yorumu okumak thirtydot hakkında konuşan fieldsetve legendve bunu düşündüm.

Bu 2 element stilini geçersiz kılıyorum, sanırım onlar için W3C standartlarını kopyalayabilir ve .middle-line-textsınıfınıza dahil edebilirsiniz (ya da onu aramak istediğiniz her şeyi) ama bu yaptığım şey:

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

İşte keman: http://jsfiddle.net/legnaleama/3t7wjpa2/

Sınır stilleri ile oynadım ve Android'de de çalışıyor;) (kitkat 4.XX üzerinde test edildi)

DÜZENLE:

Bekerov Artur'ın da güzel bir seçenek olduğu fikrini takiben .png base64 görüntüsünü .SVG ile kontur oluşturmak için değiştirdim, böylece herhangi bir çözünürlükte render yapabilir ve öğenin rengini başka bir yazılım olmadan değiştirebilirsiniz :)

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

IE8 ve daha yeni sürümler için çözüm ...

Dikkat çekmeye değer konular:

background-colorBir kenarlığı maskelemek için kullanmak en iyi çözüm olmayabilir. Karmaşık (veya bilinmeyen) bir arka plan renginiz (veya resminiz) varsa, maskeleme sonuçta başarısız olur. Ayrıca, metni yeniden boyutlandırırsanız, beyaz arka plan renginin (veya ayarladığınız her şeyin) yukarıdaki satırdaki (veya altındaki) metni örtmeye başlayacağını fark edeceksiniz.

Ayrıca , bölümlerin ne kadar geniş olduğunu "tahmin etmek " istemezsiniz , çünkü stilleri çok esnek ve içeriğin genişliğinin değiştiği duyarlı bir sitede uygulamak neredeyse imkansız hale getirir.

Çözüm:

( JSFiddle'ı görüntüle )

A ile bir sınırı "maskelemek" yerine mülkünüzü background-colorkullanın display.

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

font-sizeMülkünüzü .groupöğeye yerleştirerek metninizi yeniden boyutlandırın .

Sınırlamalar:

• Çok satırlı metin yok. Yalnızca tek satır.
• HTML biçimlendirmesi o kadar zarif değil
• top.lineeleman üzerindeki mülkün yarısı olmalıdır line-height. Eğer bir var ise, line-heightbir 1.5emsonra topolmalı -.75em. Bu bir sınırlamadır, çünkü otomatik değildir ve bu stilleri farklı satır yüksekliklerine sahip öğelere uyguluyorsanız, line-heightstilinizi yeniden uygulamanız gerekebilir .

Benim için, bu sınırlamalar çoğu uygulama için cevabımın başında belirttiğim "sorunlardan" ağır basar.

Bu, çizgiler için sabit uzunluk sağlar, ancak harika çalışır. Çizgi uzunlukları '\ 00a0' (unicode boşluk) eklenerek veya alınarak kontrol edilir.

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

<h1>side lines</h1>

Herkes sol tarafa sabit bir mesafe ile görünecek şekilde başlığı ayarlamak merak ediyorsa (ve yukarıda gösterildiği gibi ortalanmış değil), @ Puigcerber kodunu değiştirerek bunu anladım.

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

İşte 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;
        }

Bu sana yardım edecek

Kenarları dinamik olarak doldurmak için bir tablo düzeni kullanıyorum ve dinamik dikey konumlandırma için 0 yükseklik, mutlak konum bölmeleri:

• sabit kodlu boyutlar yok
• görüntü yok
• sözde eleman yok
• saygılarımı arka plan
• kontrol çubuğu görünümü

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

Gerçek merkezin biraz altında metin ile en iyi görünüyor; bu, olduğu yerde ayarlanabilir 55%(daha uzun yükseklik çubuğu daha düşük yapar). Çizginin görünümü olduğu yerde değiştirilebilir border-bottom.

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

Ölü bir atı yenmek için değil, ama bir çözüm arıyordum, burada sona erdi ve seçeneklerden kendim memnun değildim, en azından bir nedenden dolayı sağlanan çözümleri benim için iyi çalıştıramadım. (Muhtemelen benim tarafımdaki hatalar nedeniyle ...) Ama flexbox ile oynuyorum ve işte kendim için çalıştığım bir şey.

Ayarların bazıları kabloyla yapılmıştır, ancak yalnızca tanıtım amaçlıdır. Bu çözümün hemen hemen her modern tarayıcıda çalışması gerektiğini düşünüyorum. Sadece .flex-parent sınıfı için sabit ayarları kaldırın / ayarlayın, renkleri / metni / materyali ayarlayın ve (umarım) bu yaklaşımla benim kadar mutlu olacaksınız.

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>

Çözümümü buraya da kaydettim: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Herkesin istediği durumda, IMHO CSS kullanarak en iyi çözüm bir flexbox'tır.

İşte bir örnek:

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

Bu, her zaman sola ve sağa bir çizgi ile mükemmel bir şekilde ortalanmış hizalanmış bir içerikle sonuçlanmalı ve satır ile içeriğiniz arasında kontrol edilmesi kolay bir kenar boşluğu olmalıdır.

Üst kontrolünüzden önce ve sonra bir satır öğesi oluşturur ve içeriğinizi sipariş 2 (ortada gidin) olarak ayarlarken bunları esnek kabınızda 1,3 sipariş edecek şekilde ayarlayın. 1 büyümeden önce / sonra vermek, içeriğinizi ortalayarak aynı zamanda en boş alanı eşit şekilde tüketmelerini sağlar.

Bu yardımcı olur umarım!

Çok emin değilim, ancak yatay bir kural kullanmayı ve metni üst kenar boşluğunun üzerine itmeyi deneyebilirsiniz. Paragraf etiketinizde sabit bir genişliğe ve bir arka plana da ihtiyacınız olacak. Biraz kibirli ve tüm tarayıcılarda çalışıp çalışmayacağını bilmiyorum ve negatif kenar boşluğunu yazı tipinin boyutuna göre ayarlamanız gerekiyor. Krom olsa da çalışır.

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

<hr><p>def</p>

Önerilen yolların çoğunu denedim ancak tam genişlik veya Dinamik içerik için uygun değil gibi bazı sorunlarla bitiyor. Sonunda bir kodu değiştirdim ve mükemmel çalışıyor. Bu örnek kod bu satırları önce ve sonra çizer ve içerik değişiminde esnektir. Merkez de hizalı.

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

Sonuç: https://jsfiddle.net/fasilkk/vowqfnb9/

Benim için bu çözüm mükemmel çalışıyor ...

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

Bootstrap 4 kullanan kişiler bu yöntemle başarabilir. HTML kodunda belirtilen sınıflar Bootstrap 4'ten alınmıştır.

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

HTML kodunuzu şöyle yazın

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

Ortada kelimelerle yatay ve dikey çizgi

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

Bu ayrıca https://stackoverflow.com/a/57279326/6569224

• Küçük resim 1x18 tek renk nokta ile oluşturuldu # e0e0e0
• Resmi base64 koduna dönüştürdü

Sonuç:

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>