使文本容器，以適應內容自動

Question

我想要實現通過CSS這個特殊顯示：

我需要把有各種文本和線條，以填補上留下右邊的空白和剩下。

到目前爲止，我得到了這個http://jsfiddle.net/g5jtm/，但是有一些我遇到的幾個問題：

1. 文本的寬度是可變的，如果我走出width:40%;它會重置其他2的寬度線
2. 顯示：表不允許我通過文本中間對齊線

HTML：

<div class="container"> 
    <div class="lines l1"></div> 
    <div class="copy">Consumer review</div> 
    <div class="lines l2"></div>  
</div> 

CSS：

.container {width:100%; display:table; position:relative; height:100px;} 
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; } 
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;} 
.l1,.l2 {border-bottom:1px solid red; height:50px; } 

Answer 1

下面是用僞元素的一種方式

Codepen Demo

HTML

<div class="wrapper"> 
    <h1 class="line">Consumer Review</h1> 
</div> 

CSS

.wrapper { 
    width:50%; 
    margin:0 auto; 
} 

.line { 
    display: table; 
    white-space: nowrap; 
} 

.line:before, 
.line:after { 
    background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center/98% 3px; 
    content: ''; 
    display: table-cell; 
    width: 50%; 
} 

Answer 2

怎麼樣一個水平線上標籤

HTML：

<div class="container"> 
<div class="lines l1"><hr></div> 
<div class="copy">Consumer review</div> 
<div class="lines l2"><hr></div>  
</div> 

CSS：

.container {width:100%; display:table; position:relative; height:100px;} 
.lines, .copy {display:table-cell;vertical-align: middle;width:auto; } 
.copy { white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;} 
hr {color:red}