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.

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.

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 .

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

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

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 .

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/

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

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

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.

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

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>

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/

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

Retasan jahat ...

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.

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

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>

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.

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.

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

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

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>

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/

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>

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>

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

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

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

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

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:

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

<span class="divider" text-position="left">Divider</span>
<h2 class="divider">Divider</h2>
<div class="divider" text-position="right">Divider</div>

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 .

.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