CSS：如何將文字與周圍邊框對齊

Question

我想中心文字有一條線貫穿整個背景。在文本的任何一邊，都有一些填充，你根本看不到該行。我被困在一個很好的唯一方法去做這件事。這裏是一個的jsfiddle這顯然是錯誤的，但它的一個開始：http://jsfiddle.net/gtspk/

HTML

<span class="line"> 
    <h2>Latest Track</h2> 
</span> 

CSS

.line{display:block; width:100%; border-bottom:1px solid red; margin-top:25px; text-align:center} 
.line h2{font-size:15px; text-align:center; position:relative; top:10px; padding:0 15px; display:inline-block; background:white} 

這裏的問題是，我不想指定寬度，因爲我w虐待重複使用這不同的標題（不同數量的文本）。什麼是最好的方式去通過CSS這個？

更新：這是一種方式做到這一點，但inline-block的具有相當糟糕的瀏覽器支持：http://jsfiddle.net/gtspk/3/

Answer 1

在這裏你去。必須添加一個包裹跨度（必要的，這樣我們就可以將背景設置爲白色，行不打文）

http://jsfiddle.net/gtspk/9/

<span class="line"> 
    <h2><span>Latest Track</span></h2> 
</span>​ 

.line{display:block; margin:25px} 
.line h2{font-size:15px; text-align:center; border-bottom:1px solid red; position:relative; } 
.line h2 span { background-color: white; position: relative; top: 10px; padding: 0 10px;} 

對，對不起，誤會你通過填充的意思。固定。