Kỹ thuật CSS cho một đường ngang với các từ ở giữa

Tôi đang cố gắng tạo một quy tắc ngang với một số văn bản ở giữa. Ví dụ:

----------------------------------- tiêu đề của tôi ở đây ------------ -----------------

Có cách nào để làm điều đó trong CSS không? Không có tất cả dấu gạch ngang "-" rõ ràng.

Đây là cách tôi thực hiện: dòng được tạo bằng cách đặt một border-bottomcái chứa h2rồi đưa h2cái nhỏ hơn line-height. Các văn bản sau đó được đặt trong một lồng spanvới một nền không trong suốt.

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>

Tôi chỉ thử nghiệm trên Chrome, nhưng không có lý do gì nó không hoạt động trong các trình duyệt khác.

Mã thông báo: http://jsfiddle.net/7jGHS/

Sau khi thử các giải pháp khác nhau, tôi đã đưa ra một giá trị hợp lệ cho các độ rộng văn bản khác nhau, bất kỳ nền nào có thể và không thêm đánh dấu bổ sung.

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>

Tôi đã thử nghiệm nó trong IE8, IE9, Firefox và Chrome. Bạn có thể kiểm tra nó ở đây http://jsfiddle.net/Puigcerber/vLwDf/1/

Ok, cái này phức tạp hơn nhưng nó hoạt động trong mọi thứ trừ 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; 
}

Các phần tử: trước và: sau được định vị tuyệt đối để chúng ta có thể kéo một bên trái và một bên phải. Ngoài ra, chiều rộng (40% trong trường hợp này) phụ thuộc rất nhiều vào chiều rộng của văn bản bên trong .. phải suy nghĩ về một giải pháp cho điều đó. Ít nhất làtop: 1.2em đảm bảo các dòng ở lại ít nhiều ở giữa văn bản ngay cả khi bạn có cỡ chữ khác nhau.

Nó dường như hoạt động tốt mặc dù: http://jsfiddle.net/tUGrf/3/

Phương pháp ngắn nhất và tốt nhất:

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

<span> your text </span>

Đây là giải pháp dựa trên 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/

cho trình duyệt sau (ngày nay), display:flexanddpseudo-elements giúp bạn dễ dàng vẽ. border-style, box-shadowvà thậm chí backgroundgiúp quá cho việc trang điểm.

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

Đặt nhịp cho phần đệm để tạo thêm khoảng trống giữa văn bản và dòng.

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

Tôi đã tìm kiếm một số giải pháp cho trang trí đơn giản này và tôi đã tìm thấy khá nhiều giải pháp, một số kỳ lạ, một số thậm chí với JS để tính chiều cao của phông chữ và bla, bla, bla, sau đó tôi đã đọc một trên bài đăng này và đọc một bình luận từ ba mươi câu nói về fieldsetvàlegend và tôi nghĩ đó là nó.

Tôi đang ghi đè các kiểu 2 thành phần đó, tôi đoán bạn có thể sao chép các tiêu chuẩn W3C cho chúng và đưa nó vào .middle-line-textlớp của bạn (hoặc bất cứ điều gì bạn muốn gọi nó) nhưng đây là những gì tôi đã làm:

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

Đây là câu đố: http://jsfiddle.net/legnaleama/3t7wjpa2/

Tôi đã chơi với các kiểu viền và nó cũng hoạt động trong Android;) (Đã thử nghiệm trên kitkat 4.XX)

BIÊN TẬP:

Theo ý tưởng của Bekerov Artur, đây cũng là một lựa chọn tốt, tôi đã thay đổi hình ảnh .png base64 để tạo nét bằng .SVG để bạn có thể kết xuất ở bất kỳ độ phân giải nào và cũng có thể thay đổi màu của phần tử mà không cần bất kỳ phần mềm nào khác :)

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

Giải pháp cho IE8 và mới hơn ...

Các vấn đề đáng chú ý:

Sử dụng background-color để che dấu đường viền có thể không phải là giải pháp tốt nhất. Nếu bạn có màu nền (hoặc hình ảnh) phức tạp (hoặc không xác định), cuối cùng mặt nạ sẽ thất bại. Ngoài ra, nếu bạn thay đổi kích thước văn bản, bạn sẽ nhận thấy màu nền trắng (hoặc bất cứ thứ gì bạn đặt) sẽ bắt đầu che phủ văn bản trên dòng trên (hoặc bên dưới).

Bạn cũng không muốn "đoán" độ rộng của các phần, bởi vì nó làm cho các kiểu rất không linh hoạt và gần như không thể thực hiện trên một trang web đáp ứng khi độ rộng của nội dung đang thay đổi.

Giải pháp:

( Xem JSFiddle )

Thay vì "che" đường viền bằng a background-color, hãy sử dụng displaytài sản của bạn .

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

Thay đổi kích thước văn bản của bạn bằng cách đặt font-sizetài sản của bạn trên.group yếu tố.

Hạn chế:

• Không có văn bản nhiều dòng. Dòng duy nhất.
• Đánh dấu HTML không thanh lịch
• toptài sản trên .lineyếu tố cần phải là một nửa line-height. Vì vậy, nếu bạn có một line-heightsố 1.5emthì topnên -.75em. Đây là một hạn chế vì nó không tự động và nếu bạn đang áp dụng các kiểu này trên các thành phần có độ cao dòng khác nhau, thì bạn có thể cần phải áp dụng lại line-heightphong cách của mình .

Đối với tôi, những hạn chế này lớn hơn "các vấn đề" mà tôi đã lưu ý khi bắt đầu câu trả lời của mình cho hầu hết các triển khai.

Điều này cung cấp cho bạn chiều dài cố định cho các dòng, nhưng hoạt động tuyệt vời. Độ dài dòng được kiểm soát bằng cách thêm hoặc lấy '\ 00a0' (không gian unicode).

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

<h1>side lines</h1>

Nếu bất cứ ai đang tự hỏi làm thế nào để đặt tiêu đề sao cho nó xuất hiện với một khoảng cách cố định ở bên trái (và không tập trung như được trình bày ở trên), tôi đã tìm ra điều đó bằng cách sửa đổi mã của @ 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%;
}

Đây 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;
        }

Điều này sẽ giúp bạn

Tôi sử dụng bố trí bảng để điền vào các mặt động và các div vị trí tuyệt đối, cao 0 cho vị trí dọc động:

• không có kích thước mã hóa cứng
• Không có hình ảnh
• không có yếu tố giả
• tôn trọng nền
• xuất hiện thanh điều khiển

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

Tôi thấy rằng một chút dưới trung tâm thực sự trông tốt nhất với văn bản; điều này có thể được điều chỉnh ở nơi 55%có (chiều cao cao hơn làm cho thanh thấp hơn). Sự xuất hiện của dòng có thể được thay đổi trong đóborder-bottom là.

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

Không đánh bại một con ngựa chết, nhưng tôi đang tìm kiếm một giải pháp, kết thúc ở đây và bản thân tôi không hài lòng với các lựa chọn, nhất là vì một số lý do tôi không thể có được các giải pháp được cung cấp ở đây để hoạt động tốt cho tôi. (Có khả năng là do lỗi từ phía tôi ...) Nhưng tôi đã chơi với flexbox và đây là thứ tôi đã tự làm việc.

Một số cài đặt có dây cứng, nhưng chỉ cho mục đích trình diễn. Tôi nghĩ rằng giải pháp này phải hoạt động trong bất kỳ trình duyệt hiện đại nào. Chỉ cần xóa / điều chỉnh các cài đặt cố định cho lớp .flex-Parent, điều chỉnh màu sắc / văn bản / nội dung và (tôi hy vọng) bạn sẽ hài lòng như tôi với phương pháp này.

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>

Tôi cũng đã lưu giải pháp của mình tại đây: https://jsfiddle.net/Wellspring/wupj1y1a/1/

Chỉ trong trường hợp bất cứ ai muốn, IMHO giải pháp tốt nhất bằng CSS là bằng flexbox.

Đây là một ví dụ:

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

Điều này sẽ luôn dẫn đến một nội dung được căn giữa hoàn hảo với một dòng ở bên trái và bên phải, với một lề dễ kiểm soát giữa dòng và nội dung của bạn.

Nó tạo ra một yếu tố dòng trước và sau điều khiển hàng đầu của bạn và đặt chúng thành thứ tự 1,3 trong thùng chứa flex của bạn trong khi đặt nội dung của bạn là thứ tự 2 (đi ở giữa). đưa ra trước / sau khi tăng 1 sẽ khiến chúng tiêu tốn nhiều không gian trống nhất như nhau trong khi vẫn giữ nội dung của bạn ở giữa.

Hi vọng điêu nay co ich!

Tôi không chắc lắm, nhưng bạn có thể thử sử dụng quy tắc ngang và đẩy văn bản lên trên lề trên của nó. Bạn sẽ cần một chiều rộng cố định trên thẻ đoạn văn của bạn và một nền quá. Đó là một chút hack và tôi không biết nếu nó sẽ hoạt động trên tất cả các trình duyệt, và bạn cần đặt lề âm dựa trên kích thước của phông chữ. Hoạt động trên chrome mặc dù.

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

<hr><p>def</p>

Tôi đã thử hầu hết các cách được đề xuất nhưng kết thúc bằng một số vấn đề như toàn bộ chiều rộng hoặc Không phù hợp với nội dung động. Cuối cùng tôi đã sửa đổi một mã, và hoạt động hoàn hảo. Mã ví dụ này sẽ vẽ các dòng đó trước và sau, và nó linh hoạt trong việc thay đổi nội dung. Trung tâm phù hợp quá.

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

Kết quả: https://jsfiddle.net/fasilkk/vowqfnb9/

Đối với tôi giải pháp này hoạt động hoàn toàn tốt ...

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

Những người đang sử dụng Bootstrap 4 có thể đạt được bằng phương pháp này. các lớp được đề cập trong mã HTML là từ 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;
 }

Và viết HTML của bạn như thế này

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

Đường ngang và dọc với các từ ở giữa

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

Điều này cũng được trả lời trong https://stackoverflow.com/a/57279326/6569224

• Tạo hình ảnh nhỏ 1x18 với một chấm màu # e0e0e0
• Chuyển đổi hình ảnh thành mã base64

Kết quả:

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>