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;}

对,抱歉,误解了你的填充意味着什么.固定.