Văn bản được căn giữa với dòng giống như giờ trên cả hai mặt, mà không cần sử dụng bảng

Question

Tôi cần phải tạo dòng tiêu đề với các dòng có độ dài bằng nhau trên cả hai mặt của văn bản dòng tiêu đề và kích thước cố định giữa các dòng và văn bản. Văn bản sẽ thay đổi do đó không được đặt chiều rộng. Các dòng nên chiếm toàn bộ chiều rộng còn lại có sẵn trong vùng chứa dòng tiêu đề. Văn bản dòng tiêu đề không được đặt nền vì nền phía sau sẽ thay đổi. Một cái gì đó như thế này:

------------------------------------------ --------------- Một số tiếp theo --------------------------------- ------------------------

tôi giải quyết nó bằng cách sử dụng bảng:

<table width="100%"> 
    <td><hr /></td> 
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td> 
    <td><hr /></td> 
</table>​ 

Bạn có thể thử nó ra ở đây: http://jsfiddle.net/md2dF/3/

Ngữ nghĩa đây là giải pháp thực sự tồi, tiêu đề không liên quan gì đến dữ liệu dạng bảng. Làm thế nào bạn sẽ làm điều này mà không có một bảng?

Để tóm tắt (vì các giải pháp đề nghị đều bị bỏ qua một hoặc nhiều yêu cầu):

• Tiêu đề không phải có chiều rộng cố định
• Văn bản tiêu đề không phải có một nền tảng
• Tiêu đề văn bản không được có chiều rộng cố định
• Các dòng ở hai bên của văn bản phải chiếm tất cả chiều rộng còn lại
• Đệm giữa các dòng và văn bản phải được cố định chiều rộng
• Nếu nghi ngờ, hãy nhìn vào http://jsfiddle.net/md2dF/3/

Answer 1

Newer answer that works on newer versions of IE and Firefox

Nếu không có bất kỳ thủ đoạn:

fieldset.title { 
 
    border-top: 1px solid #aaa; 
 
    border-bottom: none; 
 
    border-left: none; 
 
    border-right: none; 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
fieldset.title legend { 
 
    padding: 5px 10px; 
 
}

<fieldset class="title"> 
 
    <legend>Some text</legend> 
 
</fieldset>

Live demo on jsfiddle

Answer 2

Bạn có thể làm điều đó như vậy (đối với nền, bạn có thể tạo ra một hình ảnh 1px của sự lựa chọn màu sắc của bạn):

<h1><span>Some Text</span></h1> 

h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; } 
h1 span { padding: 0 3px; background-color: #ffffff; } 

Edit: Không bg color:

.hr { width: 100%; height: 40px; line-height: 40px; } 
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; } 
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; } 
.hr .line.right { float: right;} 

<div class="hr"> 
<div class="line left"></div> 
<span>Some Text</span> 
<div class="line right"></div> 
</div> 

Bạn sẽ cần phải điều chỉnh phần trăm và không có gì, nhưng nó hoạt động nói chung.

Answer 3

Edit:

Nếu không có bất kỳ màu nền hay hình ảnh:

<div> 
    <div><hr></div> 
    <span>Some text</span> 
    <div><hr></div> 
</div>​ 

CSS:

div { 
    width:300px; 
    text-align:center; 
    display:table; 
} 
div > div { 
    display:table-cell; 
    vertical-align:middle; 
} 
div > span { 
    white-space:nowrap; 
}​ 

trình trong IE8 +

Live demo

---

Original câu trả lời:

Nếu không có bất kỳ hình ảnh:

<div> 
<span>Some text</span> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

CSS:

​div { 
    border-bottom:1px solid #000; 
    line-height:16px; 
    text-align:center; 
} 
span { 
    background:#FFF; 
    position:relative; 
    bottom:-8px; /* half of line-height */ 
    padding:0 15px; 
} 

Live demo

Bạn có thể sử dụng bất kỳ khối yếu tố bạn muốn (h1, h2, whatever) thay vì div.

Answer 4

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

Cấu trúc

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

.strike > span:after { 
    left: 100%; 
} 

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