Teknik CSS untuk garis horizontal dengan kata-kata di tengah

Saya mencoba membuat aturan horizontal dengan beberapa teks di tengah. Sebagai contoh:

----------------------------------- judul saya di sini ------------ -----------------

Apakah ada cara untuk melakukan itu di CSS? Tanpa semua tanda "-" jelas.

Ini kira-kira bagaimana saya akan melakukannya: baris dibuat dengan mengatur border-bottompada yang mengandung h2kemudian memberikan yang h2lebih kecil line-height. Teks tersebut kemudian diletakkan bersarang spandengan latar belakang yang tidak transparan.

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>

Saya menguji di Chrome saja, tetapi tidak ada alasan itu tidak berfungsi di browser lain.

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

Setelah mencoba solusi yang berbeda, saya telah datang dengan satu valid untuk lebar teks yang berbeda, latar belakang yang mungkin dan tanpa menambahkan markup tambahan.

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>

Saya mengujinya di IE8, IE9, Firefox dan Chrome. Anda dapat memeriksanya di sini http://jsfiddle.net/Puigcerber/vLwDf/1/

Ok, yang ini lebih rumit tetapi bekerja di semua hal kecuali 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; 
}

Elemen: sebelum dan: setelah diposisikan secara absolut sehingga kita dapat menarik satu ke kiri dan satu ke kanan. Juga, lebar (40% dalam hal ini) sangat bergantung pada lebar teks di dalam .. harus memikirkan solusi untuk itu. Setidaknya top: 1.2empastikan garis-garisnya tetap berada di tengah teks meskipun Anda memiliki ukuran font yang berbeda.

Itu tampaknya bekerja dengan baik: http://jsfiddle.net/tUGrf/3/

Metode terpendek dan terbaik:

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

<span> your text </span>

Berikut adalah solusi berbasis 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/

untuk nanti (nowdays) Browser, display:flexandd pseudo-elements membuatnya mudah untuk menarik. border-style, box-shadowdan bahkan backgroundmembantu merias wajah.

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

Beri rentang bantalan untuk membuat lebih banyak ruang antara teks dan garis.

Contoh: http://jsfiddle.net/tUGrf/

Saya telah mencari-cari beberapa solusi untuk dekorasi sederhana ini dan saya telah menemukan beberapa yang, beberapa aneh, beberapa bahkan dengan JS untuk menghitung ketinggian font dan bla, bla, bla, maka saya sudah membaca satu di posting ini dan membaca komentar dari tigapuluhdot berbicara tentang fieldsetdan legenddan saya pikir itu dia.

Saya mengesampingkan gaya 2 elemen itu, saya kira Anda dapat menyalin standar W3C untuk mereka dan memasukkannya ke dalam .middle-line-textkelas Anda (atau apa pun yang Anda ingin menyebutnya) tetapi inilah yang saya lakukan:

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

Ini biola: http://jsfiddle.net/legnaleama/3t7wjpa2/

Saya telah bermain dengan gaya perbatasan dan juga berfungsi di Android;) (Diuji pada kitkat 4.XX)

EDIT:

Mengikuti ide Bekerov Artur yang merupakan opsi yang bagus juga, saya telah mengubah gambar .png base64 untuk membuat goresan dengan .SVG sehingga Anda dapat membuat resolusi apa pun dan juga mengubah warna elemen tanpa melibatkan perangkat lunak lain :)

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

Solusi untuk IE8 dan yang lebih baru ...

Masalah yang perlu diperhatikan:

Menggunakan background-color untuk menutupi perbatasan mungkin bukan solusi terbaik. Jika Anda memiliki warna latar belakang (atau gambar) yang kompleks (atau tidak dikenal), masking pada akhirnya akan gagal. Juga, jika Anda mengubah ukuran teks, Anda akan melihat bahwa warna latar belakang putih (atau apa pun yang Anda atur) akan mulai menutupi teks pada baris di atas (atau di bawah).

Anda juga tidak ingin "menebak-nebak" seberapa lebar bagian-bagiannya, karena itu membuat gaya sangat tidak fleksibel dan hampir tidak mungkin untuk diterapkan pada situs responsif di mana lebar konten berubah.

Larutan:

( Lihat JSFiddle )

Alih-alih "menutupi" batas dengan background-color, gunakan displayproperti Anda .

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

Ubah ukuran teks Anda dengan menempatkan font-sizeproperti Anda di.group elemen.

Keterbatasan:

• Tidak ada teks multi-baris. Hanya satu baris.
• Markup HTML tidak elegan
• topproperti pada .lineelemen harus setengah dari line-height. Jadi, jika Anda memiliki line-heightdari 1.5em, maka topharus -.75em. Ini adalah batasan karena tidak otomatis, dan jika Anda menerapkan gaya ini pada elemen dengan ketinggian garis yang berbeda, maka Anda mungkin perlu menerapkan kembali line-heightgaya Anda .

Bagi saya, keterbatasan ini lebih besar daripada "masalah" yang saya catat di awal jawaban saya untuk sebagian besar implementasi.

Ini memberi Anda panjang tetap untuk garis, tetapi bekerja dengan baik. Panjang garis dikontrol dengan menambahkan atau mengambil '\ 00a0' (ruang unicode).

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

<h1>side lines</h1>

Jika ada yang bertanya-tanya bagaimana mengatur judul sehingga muncul dengan jarak tetap ke sisi kiri (dan tidak berpusat seperti yang disajikan di atas), saya mengetahuinya dengan memodifikasi kode @ 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%;
}

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

ini akan membantu Anda

Saya menggunakan tata letak tabel untuk mengisi sisi secara dinamis dan div posisi absolut 0-tinggi untuk pemosisian vertikal dinamis:

• tidak ada dimensi hard-kode
• tidak ada gambar
• tidak ada elemen semu
• menghormati latar belakang
• tampilan kontrol bar

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

Saya menemukan bahwa sedikit di bawah pusat benar terlihat paling baik dengan teks; ini dapat disesuaikan di mana 55%ada (ketinggian lebih tinggi membuat bar lebih rendah). Tampilan garis dapat diubah di mana tempatnya 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;
}

Bukan untuk mengalahkan kuda yang mati, tetapi saya sedang mencari solusi, berakhir di sini, dan saya sendiri tidak puas dengan pilihannya, paling tidak untuk beberapa alasan saya tidak bisa mendapatkan solusi yang disediakan di sini untuk bekerja dengan baik untuk saya. (Kemungkinan karena kesalahan pada bagian saya ...) Tapi saya sudah bermain dengan flexbox dan inilah sesuatu yang saya lakukan untuk bekerja sendiri.

Beberapa pengaturan terprogram, tetapi hanya untuk tujuan demonstrasi. Saya pikir solusi ini harus bekerja di hampir semua browser modern. Hapus / sesuaikan pengaturan tetap untuk kelas .flex-parent, sesuaikan warna / teks / barang dan (saya harap) Anda akan sama senangnya dengan pendekatan ini.

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>

Saya juga menyimpan solusi saya di sini: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Kalau-kalau ada yang mau, IMHO solusi terbaik menggunakan CSS adalah dengan flexbox.

Berikut ini sebuah contoh:

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

Ini harus selalu menghasilkan konten selaras terpusat sempurna dengan garis ke kiri dan kanan, dengan margin kontrol yang mudah antara garis dan konten Anda.

Ini membuat elemen garis sebelum dan sesudah kontrol teratas Anda dan mengaturnya untuk memesan 1,3 dalam wadah fleksibel Anda sambil mengatur konten Anda sebagai pesanan 2 (masuk di tengah). memberi sebelum / sesudah pertumbuhan 1 akan membuat mereka mengonsumsi ruang paling kosong secara merata sambil menjaga konten Anda tetap terpusat.

Semoga ini membantu!

Saya tidak terlalu yakin, tetapi Anda bisa mencoba menggunakan aturan horizontal dan mendorong teks di atas margin atasnya. Anda akan membutuhkan lebar tetap pada tag paragraf dan latar belakang Anda juga. Ini sedikit hacky dan saya tidak tahu apakah itu akan berfungsi pada semua browser, dan Anda perlu mengatur margin negatif berdasarkan ukuran font. Bekerja pada chrome.

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

<hr><p>def</p>

Saya telah mencoba sebagian besar cara yang disarankan tetapi diakhiri dengan beberapa masalah seperti lebar penuh, atau Tidak cocok untuk konten dinamis. Akhirnya saya memodifikasi kode, dan bekerja dengan sempurna. Kode contoh ini akan menggambar garis-garis itu sebelum dan sesudah, dan fleksibel dalam perubahan konten. Pusat juga disejajarkan.

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

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

Bagi saya solusi ini berfungsi dengan baik ...

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

Orang yang menggunakan Bootstrap 4 dapat mencapainya dengan metode ini. kelas yang disebutkan dalam kode HTML berasal dari 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;
 }

Dan tulis HTML Anda seperti ini

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

Garis horizontal dan vertikal dengan kata-kata di tengah

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

Ini juga dijawab dalam https://stackoverflow.com/a/57279326/6569224

• Dibuat gambar kecil 1x18 dengan satu titik warna # e0e0e0
• Mengubah gambar menjadi kode base64

Hasil:

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>