Tambahkan teks terpusat ke tengah baris <hr />


217

Saya ingin tahu opsi apa saja yang ada di xhtml 1.0 ketat untuk membuat garis di kedua sisi teks seperti-jadi:

Bagian satu
----------------------- Bagian selanjutnya -----------------------
Bagian dua

Saya sudah memikirkan melakukan beberapa hal mewah seperti ini:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

Atau sebagai alternatif, karena hal di atas memiliki masalah dengan penyelarasan (baik vertikal dan horizontal):

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

Ini juga memiliki masalah pelurusan, yang saya selesaikan dengan kekacauan ini:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

Selain masalah pelurusan, kedua opsi ini terasa 'aneh', dan saya akan sangat berkewajiban jika Anda pernah melihat ini sebelumnya dan mengetahui solusi yang elegan.


3
Inilah utas lainnya dengan tantangan tanpa tag ekstra - dan solusinya! stackoverflow.com/questions/12648513/…
willoller

1
stackoverflow.com/questions/5214127/… masih merupakan solusi terbaik.

Jawaban yang berguna di sini akan menggunakan CSS Grid.
Brian M. Hunt

Menambahkan jawaban (SCSS) yang mengubah hampir semua elemen menjadi pembagi tanpa latar belakang yang ditetapkan dan memungkinkan pengaturan: warna dan gaya goresan (solid, putus-putus, putus-putus) dari pembagi, posisi teks (kiri, kanan, tengah), serta kelas yang menerapkan ini (secara default .divider).
tao

Diberikan dukungan flexbox saat ini saya pikir jawaban saya bisa mendapatkan visibilitas.
MatTheCat

Jawaban:


64

Saya tidak tahu apakah ini sudah diketahui tetapi flexbox menawarkan solusi yang cukup:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

Lihat http://jsfiddle.net/MatTheCat/Laut6zyc/ untuk demo.

Hari ini kompatibilitasnya tidak terlalu buruk (Anda dapat menambahkan semua sintaks flexbox lama) dan menurun dengan anggun.


Jawaban terbaik mempertimbangkan dukungan flexbox hari ini
akivajgordon

ini adalah solusi yang bagus
Smaillns

217

Bagaimana tentang:

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

Lihat ini JSFiddle .

Anda dapat menggunakan vwatau %membuatnya responsif .


2
Mendapatkan nilai tertinggi yang tepat agak sulit. Itu tidak persis -0.5em;
Mitar

sempurna. "Responsif" juga
JimXC

4
Lihat jawaban saya untuk solusi yang tidak mengharuskan Anda menentukan warna latar belakang atau lebarnya.
MartinF

Lihat jawaban saya untuk bg responsif, transparan, gaya variabel dan tinggi pembagi, posisi variabel teks. Dapat juga diterapkan lebih dari satu kali untuk penyeleksi yang berbeda, karena memiliki lebih dari satu gaya pembagi dalam proyek yang sama, menggunakan SCSS. Bekerja dengan siapa saja font-size.
tao

193

Cara mengatasi ini tanpa mengetahui lebar dan warna latar belakang adalah sebagai berikut:

Struktur

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

Contoh: http://jsfiddle.net/z8Hnz/

Garis ganda

Untuk membuat garis ganda, gunakan salah satu opsi berikut:

1) Memperbaiki ruang antar garis

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

Contoh: http://jsfiddle.net/z8Hnz/103/

2) Ruang khusus antar garis

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

Contoh: http://jsfiddle.net/z8Hnz/105/


Versi SASS (SCSS)

Berdasarkan solusi ini, saya menambahkan SCSS "dengan properti warna" jika dapat membantu seseorang ...

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

contoh penggunaan:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

Versi ini berfungsi lebih baik jika Anda menggunakan gambar untuk saluran - atau setidaknya lebih mudah untuk mengedit dan tetap responsif
tehlivi

Kerja yang sangat bagus! Bisakah Anda menggunakan sihir untuk membuat garis ganda? (Kalau tidak, saya hanya akan menggunakan gambar latar kecil yang berulang-ulang.)
wloescher

3
Cuplikan hebat! Terima kasih :)
plong0

2
Ini adalah jawaban terbaik karena akan bekerja tanpa pengaturan latar belakang, dan ketika Anda harus mengatur latar belakang transparan
Dinesh Dabhi

1
Contoh pertama sangat mengagumkan! Selamat! Itu harus jawaban yang benar!
Luiz Eduardo

87

Anda dapat mencapai ini dengan :: before dan :: after tanpa mengetahui lebar wadah atau warna latar belakang, dan untuk mencapai gaya penataan garis yang lebih besar. Misalnya, ini dapat dimodifikasi untuk membuat garis ganda, garis putus-putus, dll.

JSFiddle

Penggunaan CSS, dan 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>

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

1
Solusi elegan, meskipun memiliki satu peringatan: jika tidak ada teks, Anda masih akan memiliki celah di antara baris.
Farside

13
Ini adalah solusi terbersih di utas ini jujur, masalah tanpa teks dapat diabaikan karena Anda ingin pembagi dengan teks selalu.
Robert

51

Coba ini:

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

Pratinjau langsung di jsFiddle .


4
Ini berfungsi dengan baik dan menggunakan <hr /> jadi apa yang mungkin salah dengan jawaban ini? Saya tidak mengatakan apa-apa.
Kirby

4
+1 Tidak perlu dipusingkan dengan warna latar belakang atau menggunakan tag dengan cara yang tidak disengaja. Satu kelemahan adalah .divider hrlebar tergantung pada berapa lama teks tersebut. Saran: .dividerdan .divider hrlebar harus ditentukan dalam emsatuan. Untuk mendapatkan hrlebar, gunakan ( .dividerlebar dikurangi # karakter) / 2.
Kelvin

12
Itu bukan solusi terbaik. Bagaimana jika Anda tidak memiliki kepastian tentang lebar teks. Semua akan hancur ketika teks akan lebih panjang.
Iwona Trąbka

Ini adalah jawaban terbaik dan paling sederhana
ha9u63ar

1
40% salah di sini. Jika teks lebih panjang, itu akan salah selaras
TomSawyer

21

Saya baru saja menemukan masalah yang sama, berikut adalah salah satu cara untuk menyelesaikannya:

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

Ini bekerja tanpa menetapkan latar belakang pada elemen teks, yaitu akan terlihat bagus terlepas dari latar belakang apa yang ada di belakangnya.

Anda dapat mencobanya di sini: http://jsfiddle.net/88vgS/


Tidak menyelesaikan masalah OP. Itu menciptakan dua baris dengan teks di antara mereka. Dia ingin garis yang terputus sebagian dan memiliki teks di bagian yang rusak, kemudian garis berlanjut.
Dracorat

2
Ini benar-benar melakukan apa yang diminta OP. Anda dapat melihatnya di jsfiddle.net/88vgS
Robert Kajic

Juga, apakah garis yang dipisah sebagian jalan, dengan teks di bagian yang rusak, jika tidak dua baris dengan teks di antara mereka?
Robert Kajic

Anda harus membuang tag TR yang sesuai di sana. Saya pikir itulah yang membuat saya bingung sejenak. Saya awalnya berpikir untuk beberapa alasan itu pada tiga baris, bukan tiga kolom. Markup yang benar mungkin tidak akan menyebabkan saya melihatnya seperti itu. Bagaimanapun, itu jelas merupakan solusi yang bisa diterapkan.
Dracorat

1
Tapi ini menggunakan tabel, itu TIDAK DIIZINKAN! Oh, hanya bercanda. GRIDS memiliki tempatnya, hampir semua kerangka kerja GUI XML lainnya mengenalinya dan menggunakannya di mana-mana (mis. WPF / XAML). Terima kasih untuk teman solusi! Ini layak mendapatkan lebih dari 3 suara. Saya menduga keengganan orang untuk meja yang dibenci akan menjadi kendala.
Nicholas Petersen

10

MEMPERBARUI: Ini tidak akan berfungsi menggunakan HTML5

Alih-alih, periksa pertanyaan ini untuk lebih banyak teknik: tantangan CSS, dapatkah saya melakukan ini tanpa memperkenalkan lebih banyak HTML?


Saya biasa line-height:0membuat efek di header situs saya 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;
}

Metode lain yang baik aktif http://robots.thoughtbot.com/

Dia menggunakan gambar latar belakang dan mengapung untuk mencapai efek keren


1
Saya suka ini, kelihatannya bagus di situs Anda, tetapi saya tidak bisa membuatnya berfungsi (saya curiga ada gangguan dari jQuery css). :( Tapi itu sangat keren.
Brian M. Hunt

Saya pikir h1 Anda mendorong rentang ke bawah.
Im

1
Ini adalah "retasan" yang menggunakan perilaku render yang berbeda untuk DOCTYPE XTHML 1.0 Transisional. Jika Anda menggunakan DOCTYPE html (untuk HTML5), itu TIDAK akan berfungsi.
Peter

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

6

Jika Anda dapat menggunakan CSS dan bersedia menggunakan alignatribut yang tidak digunakan lagi , sebuah fieldset / legenda gaya akan berfungsi:

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

Tujuan yang dimaksud dari suatu rangkaian adalah untuk mengelompokkan bidang formulir secara logis. Seperti yang Willoler tunjukkan, text-align: centergaya untuk tidak akan bekerja untuk legendelemen. align="center"HTML sudah usang tetapi harus memusatkan teks dengan benar di semua browser.


Penjelasan lebih rinci tentang apa yang saya tuju.
dclowd9901

Saya cukup yakin <legend>menampilkan ciri-ciri tampilan elemen blockatau inline-block, karena dapat diisi dan dibatasi, yang berarti text-align:centertidak akan berfungsi ...
dclowd9901

ya legenda bagus untuk semantik - saya menggunakannya untuk membungkus grup radio tetapi mereka terkenal keras kepala
willoller

Saya mengoreksi jawaban saya. Sayangnya karena keras kepala browser tertentu dalam menata legendelemen, align="center"adalah satu-satunya solusi yang dapat saya temukan yang secara andal memusatkan a legend.
Trey Hunner

6

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

1
The vertical-centerkelas tidak ada lagi di bootstrap (4.3.1). Bisakah Anda memperbarui jawaban Anda untuk mengatakannya align-items-center?
Cameron Hudson

5

Anda bisa menggunakan posisi relatif dan mengatur ketinggian pada induk

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


5

Inilah solusi sederhana dengan css saja, tanpa trik latar belakang ...

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

contoh biola: https://jsfiddle.net/0Lkj6wd3/


Solusi hebat dan dapat digunakan kembali, seperti kelas utilitas.
Vignesh

3
<fieldset style="border:0px; border-top:1px solid black">
    <legend>Test</legend>
</fieldset>

Retasan jahat ...


1
Saya tidak akan menyebutnya peretasan, tetapi saya akan menguji apakah itu berfungsi di semua browser yang ingin Anda dukung.
Nick Larsen

fieldset tidak ingin digunakan seperti itu, telah diretas ke tempatnya ;-)
Dänu

3

Menghasilkan posting berusia 2 tahun, tetapi di sini adalah bagaimana saya mendekati situasi ini hanya menggunakan satu elemen dan 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;
}

Dan di sini ada biola untuk memeriksanya: http://jsfiddle.net/sRhBc/ (gambar acak dari Google diambil untuk perbatasan).

Satu-satunya kelemahan dari pendekatan ini adalah tidak mendukung IE7.


3

Gunakan saja

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

2

Woohoo posting pertama saya meskipun ini berumur satu tahun. Untuk menghindari masalah pewarnaan latar belakang dengan pembungkus, Anda dapat menggunakan inline-block dengan jam (tidak ada yang mengatakan itu secara eksplisit). Perataan teks harus berada di tengah dengan benar karena itu adalah elemen sebaris.

<div style="text-align:center">
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
       &nbsp;New Section&nbsp;
    <hr style="display:inline-block; position:relative; top:4px; width:45%" />
</div>

2

Saya menggunakan h1dengan rentang di tengah.

Contoh HTML:

<h1><span>Test archief</span></h1>

Contoh CSS:

.archive h1 {border-top:3px dotted #AAAAAA;}
.archive h1 span { display:block; background:#fff; width:200px; margin:-23px auto; text-align:center }

Sederhana seperti itu.


Selamat datang di StackOverflow, Youri. Alih-alih span, Anda dapat mempertimbangkan menggunakan a div. Ini melayani tujuan yang sama, kecuali secara alami elemen blok. :)
Nix

@Nix Blokir elemen di dalam elemen sebaris? Tidak, terima kasih, rentang adalah pilihan yang baik
Jonathan Azulay

1
@MrAzulay h1adalah elemen inline. spanbagus untuk hal-hal pembungkus, tetapi alasan saya lebih memilih divdalam hal ini, adalah karena Youri penggunaan CSS untuk mengatur spanke display:block;. Saya tidak melihat titik membuat elemen inline menjadi elemen blok, ketika ada elemen blok yang sesuai ( div) sudah tersedia.
Nix

@Nix Bukankah itu hal yang cukup umum untuk dilakukan? Sementara menempatkan blok di dalam inline adalah praktik buruk. Ini adalah posting yang bagus tentang hal itu skypoetsworld.blogspot.se/2008/10/…
Jonathan Azulay

Ups, saya salah mengetik komentar terakhir saya. Saya setuju bahwa Anda tidak harus menempatkan blok di dalam elemen inline, tetapi h1sebenarnya adalah elemen BLOCK. Maaf bila membingungkan. Meski begitu, saya tidak melihat titik membuat spanmenjadi elemen blok, tapi cukup adil.
Nix

2

Melihat di atas, saya memodifikasi ke:

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>

Tampaknya bekerja dengan baik.


2

Mengambil solusi @ kajic dan menempatkan penataan dalam CSS:

<table class="tablehr">
  <td><hr /></td>
  <td>Text!</td>
  <td><hr /></td>
</table>

Kemudian CSS (tapi itu tergantung pada CSS3 dalam menggunakan pemilih ke-n):

.tablehr { width:100%; }
.tablehr > tbody > tr > td:nth-child(2) { width:1px; padding: 0 10px; white-space: nowrap; }

Bersulang.

(PS On tbody dan tr, Chrome, IE dan Firefox setidaknya secara otomatis memasukkan tbody dan tr, itulah sebabnya sampel saya, seperti @ kajic's, tidak menyertakan ini untuk menjaga hal-hal yang lebih pendek dalam markup html yang diperlukan. Solusi ini telah diuji dengan versi terbaru IE, Chrome, dan Firefox, pada 2013).


2

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

2

Ini bekerja untuk saya dan tidak memerlukan warna latar belakang di belakang teks untuk menyembunyikan garis perbatasan, melainkan menggunakan tag jam aktual. Anda dapat bermain-main dengan lebar untuk mendapatkan ukuran garis jam yang berbeda.

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

2

Saya membuat biola yang menggunakan FlexBox dan juga akan memberi Anda gaya HR yang berbeda (garis ganda, simbol di tengah garis, drop shadow, inset, putus-putus, dll).

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>&nbsp;</p>
<div class="divider right">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>
<p>&nbsp;</p>
<div class="divider left fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider right fixed">
  <hr />
  <label>Welcome!</label>
</div>
<p>&nbsp;</p>
<div class="divider center fixed">
  <hr />
  <label>Welcome!</label>
  <hr />
</div>

Atau inilah Fiddle interaktif: http://jsfiddle.net/mpyszenj/439/


2

Anda dapat mencoba melakukan fieldset, dan menyelaraskan elemen "legenda" (teks "bagian berikutnya") ke tengah bidang dengan hanya border-topdisetel. Saya tidak yakin tentang bagaimana legenda diposisikan sesuai dengan elemen fieldset. Saya membayangkan itu mungkin hanya sederhanamargin: 0px auto untuk melakukan triknya.

contoh:

<fieldset>
      <legend>Title</legend>
</fieldset>

1

Anda dapat melakukannya tanpa ini <hr />. Semantik, desain harus dilakukan dengan menggunakan CSS, dalam hal ini sangat mungkin.

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">&nbsp;</div>
</div>

1

Selalu ada FIELDSET tua yang bagus

 fieldset
 {
border-left: none;
border-right: none;
border-bottom: none;
 }
 fieldset legend
 {
text-align: center;
padding-left: 10px;
padding-right: 10px;
 }

Fieldsets hanya dapat digunakan dengan formulir.
tehlivi

1

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

0

Anda dapat membuat blok pembungkus dengan beberapa gambar latar belakang yang sesuai (dan juga mengatur beberapa warna latar belakang untuk blok teks tengah Anda).


0

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>

Anda dapat memodifikasi lebar di kelas "sisi" dan "tengah" berdasarkan panjang teks Anda di tag "rentang". Pastikan lebar "tengah" ditambah 2 kali lebar "sisi" sama dengan 100%.


0

Responsif, latar belakang transparan, tinggi variabel dan gaya pembagi, posisi variabel teks, jarak yang dapat disesuaikan antara pembagi dan teks. Dapat juga diterapkan beberapa kali dengan penyeleksi berbeda untuk beberapa gaya pembagi dalam proyek yang sama.
SCSS di bawah ini.

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

Tanpanya text-positiondefault ke pusat.

Demo:

Dan SCSS , untuk memodifikasinya dengan cepat:

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

biola di sini .


Hai, saya sangat menghargai cuplikan kode Anda. Jika saya meletakkan teks dengan pembagi selain bahasa Inggris (dalam kasus saya, bahasa Korea), teks memecah baris dalam setiap dua huruf. Bisakah Anda mencari tahu mengapa?
cadenzah

0

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}
<div>
   <hr> <span class="orSpan">OR</span>
</div>

Anda mungkin diminta untuk menyesuaikan properti margin

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.