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

Question

我正在尝试将有一条线穿过整个背景的文本居中。在文本的两侧，有一些填充，您根本看不到该行。对于一个好的 CSS-only 方法，我很难过。这是一个明显错误的 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解决这个问题的最佳方法是什么？

更新：这是一种方法，但 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;}

对，对不起，误解了你所说的填充的意思。已修复。​</p>