CSS：如何使周围边框的文本居中

Question

我正在尝试将一条线穿过整个背景的文本居中。在文本的任一侧，有一些填充，在那里你根本看不到线。我只是一个很好的css方式来解决这个问题。这是一个明显错误的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}

这里的问题是我不想指定宽度，因为我将重用不同的标题（具有不同的文本量）。通过CSS来解决这个问题的最佳方法是什么？

更新：HEre是一种方法，但内联块有相当糟糕的浏览器支持：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;}

对，抱歉，误解了填充的含义。固定的。