Tôi đang tự hỏi những tùy chọn nào có trong xhtml 1.0 nghiêm ngặt để tạo một dòng trên cả hai mặt của văn bản giống như vậy:

Phần một
----------------------- Phần tiếp theo -----------------------
Phần hai

Tôi đã nghĩ làm một số điều lạ mắt như thế này:

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

Hoặc cách khác, vì ở trên có vấn đề với căn chỉnh (cả dọc và ngang):

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

Điều này cũng có vấn đề căn chỉnh, mà tôi giải quyết với mớ hỗn độn này:

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

Ngoài các vấn đề căn chỉnh, cả hai tùy chọn đều cảm thấy 'ẻo lả', và tôi sẽ rất có nghĩa vụ nếu bạn tình cờ thấy điều này trước đây và biết về một giải pháp tao nhã.

Tôi không biết nếu điều này đã được tìm ra nhưng flexbox cung cấp một giải pháp khá:

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

Xem http://jsfiddle.net/MatTheCat/Laut6zyc/ để xem bản demo.

Ngày nay khả năng tương thích không phải là xấu (bạn có thể thêm tất cả các cú pháp flexbox cũ) và nó xuống cấp một cách duyên dáng.

Làm thế nào về:

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

Hãy xem JSFiddle này .

Bạn có thể sử dụng vwhoặc %để làm cho nó đáp ứng .

Cách để giải quyết vấn đề này mà không cần biết chiều rộng và màu nền là như sau:

Kết cấu

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

Ví dụ: http://jsfiddle.net/z8Hnz/

Đường đôi

Để tạo một đường đôi, sử dụng một trong các tùy chọn sau:

1) Không gian cố định giữa các dòng

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

Ví dụ: http://jsfiddle.net/z8Hnz/103/

2) Không gian tùy chỉnh giữa các dòng

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

Ví dụ: http://jsfiddle.net/z8Hnz/105/

Phiên bản SASS (SCSS)

Dựa trên giải pháp này, tôi đã thêm SCSS "với thuộc tính màu" nếu nó có thể giúp ai đó ...

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

ví dụ về việc sử dụng:

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

Bạn có thể thực hiện điều này với :: trước và :: sau mà không cần biết chiều rộng của vùng chứa hoặc màu nền và để đạt được kiểu dáng lớn hơn của các ngắt dòng. Ví dụ, điều này có thể được sửa đổi để tạo đường đôi, đường chấm, v.v.

Câu đố

Sử dụng CSS và 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>

Phiên bản 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;
    }
}

Thử cái này:

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

Xem trước trực tiếp trên jsFiddle .

Tôi vừa gặp một vấn đề tương tự, đây là một cách để giải quyết nó:

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

Nó hoạt động mà không cần đặt nền trên thành phần văn bản, tức là nó sẽ trông tốt bất kể nền nào phía sau nó.

Bạn có thể dùng thử tại đây: http://jsfiddle.net/88vgS/

CẬP NHẬT: Điều này sẽ không hoạt động bằng HTML5

Thay vào đó, hãy kiểm tra câu hỏi này để biết thêm các kỹ thuật: Thử thách CSS, tôi có thể làm điều này mà không cần giới thiệu thêm HTML không?

Tôi đã sử dụng line-height:0để tạo hiệu ứng trong tiêu đề của trang web của mình 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;
}

Một phương pháp tốt khác là trên http://robots. Dùtbot.com

Anh ta sử dụng một hình ảnh nền và nổi để đạt được một hiệu ứng tuyệt vời

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

Nếu bạn có thể sử dụng CSS và sẵn sàng sử dụng alignthuộc tính không dùng nữa , một bộ / trường chú thích theo kiểu sẽ hoạt động:

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

Mục đích dự định của một bộ trường là để nhóm các trường mẫu hợp lý. Như willoler đã chỉ ra, mộttext-align: center phong cách cho sẽ không hoạt động cho legendcác yếu tố. align="center"HTML không được dùng nữa nhưng nó phải căn giữa văn bản đúng trong tất cả các trình duyệt.

Lưới 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;
}

Bạn chỉ có thể sử dụng vị trí tương đối và đặt chiều cao cho cha mẹ

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

Đây là một giải pháp đơn giản chỉ với css, không có thủ thuật nền ...

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

ví dụ fiddle: https://jsfiddle.net/0Lkj6wd3/

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

Ác quỷ ...

Trả lại một bài đăng 2 năm tuổi, nhưng đây là cách tôi tiếp cận những tình huống này chỉ bằng một yếu tố và 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;
}

Và đây là một mẹo để kiểm tra xem: http://jsfiddle.net/sRhBc/ (hình ảnh ngẫu nhiên từ Google chụp cho đường viền).

Hạn chế duy nhất của phương pháp này là nó không hỗ trợ IE7.

Chỉ dùng

    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 bài viết đầu tiên của tôi mặc dù đây là một năm tuổi. Để tránh các vấn đề tô màu nền với trình bao bọc, bạn có thể sử dụng khối nội tuyến với hr (không ai nói rõ điều đó). Căn chỉnh văn bản nên căn giữa chính xác vì chúng là các thành phần nội tuyến.

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

Tôi sử dụng một h1với một khoảng ở giữa.

Ví dụ HTML:

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

Ví dụ CSS:

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

Đơn giản như vậy.

Nhìn ở trên, tôi sửa đổi thành:

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>

Có vẻ để làm việc tốt.

Lấy giải pháp của @ kajic và đưa kiểu dáng vào CSS:

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

Sau đó, CSS (nhưng nó phụ thuộc vào CSS3 trong việc sử dụng bộ chọn thứ n):

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

Chúc mừng.

(PS Trên tbody và tr, Chrome, IE và Firefox ít nhất tự động chèn một tbody và tr, đó là lý do tại sao mẫu của tôi, như @ kajic's, không bao gồm những thứ này để giữ mọi thứ ngắn hơn trong đánh dấu html cần thiết. đã được thử nghiệm với các phiên bản mới nhất của IE, Chrome và Firefox, kể từ năm 2013).

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

Điều này làm việc cho tôi và không yêu cầu màu nền phía sau văn bản để ẩn đường viền, thay vào đó sử dụng thẻ hr thực tế. Bạn có thể chơi xung quanh với chiều rộng để có các kích thước khác nhau của dòng hr.

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

Tôi đã tạo một fiddle sử dụng FlexBox và cũng sẽ cung cấp cho bạn các kiểu HR khác nhau (đường đôi, ký hiệu ở giữa dòng, bóng đổ, hình nhỏ, nét đứt, v.v.).

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>

Hoặc đây là một Fiddle tương tác: http://jsfiddle.net/mpyszenj/439/

Bạn có thể thử thực hiện fieldsetvà căn chỉnh phần tử "huyền thoại" (văn bản "phần tiếp theo" của bạn) vào giữa trường chỉ với border-toptập hợp. Tôi không chắc chắn về cách một huyền thoại được định vị theo yếu tố fieldset. Tôi tưởng tượng nó có thể chỉ đơn giảnmargin: 0px auto để thực hiện các mẹo, mặc dù.

thí dụ :

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

Bạn có thể thực hiện điều này mà không cần <hr />. Về mặt ngữ nghĩa, thiết kế nên được thực hiện với các phương tiện CSS, trong trường hợp này là hoàn toàn có thể.

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>

Luôn luôn có FIELDSET cũ tốt

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

Bạn có thể tạo một khối bao bọc với một số hình nền phù hợp (và cũng có thể đặt một số màu nền cho khối văn bản chính giữa của bạn).

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>

Bạn có thể sửa đổi độ rộng trong lớp "bên" và "giữa" dựa trên độ dài của văn bản của bạn trong thẻ "span". Đảm bảo chiều rộng của "giữa" cộng với 2 lần chiều rộng của "bên" bằng 100%.

Phản hồi, nền trong suốt, chiều cao thay đổi và kiểu dáng của dải phân cách, vị trí thay đổi của văn bản, khoảng cách điều chỉnh giữa dải phân cách và văn bản. Cũng có thể được áp dụng nhiều lần với các bộ chọn khác nhau cho nhiều kiểu chia trong cùng một dự án.
SCSS dưới đây.

Đánh dấu (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;
}

Không có text-positionnó mặc định là trung tâm.

Bản giới thiệu:

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

Và SCSS , để sửa đổi nó một cách nhanh chóng:

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

Fiddle ở đây .

.orSpan{
  position: absolute;
  margin-top: -1.3rem;
  margin-left:50%;
  padding:0 5px;
  background-color: white;
}

<div>
   <hr> <span class="orSpan">OR</span>
</div>

Bạn có thể cần phải điều chỉnh lợi nhuận bất động sản