center - 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 解决此问题的最佳方法是什么？

更新:这里有一种方法可以做到这一点，但是内联 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;}

对，对不起，误解了你所说的填充的意思。固定。