CSS: How to center text with surrounding borders

问题

I am trying to center text that has a line going through the entire background. On either side of the text, there is some padding, where you cannot see the line at all. I am stumped as far as a good css-only way to go about this. Here is a jsfiddle that is obviously wrong, but its a start: 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}

The problem here is that I DO NOT want to specify a width, because I will be reusing this for different headers (with different amounts of text). What is the best way to go about this via css?

UPDATE: HEre is a way to do it, but inline-block has fairly lousy browser support: http://jsfiddle.net/gtspk/3/

回答1:

Here you go. Had to add a wrapping span (necessary so we can set the background to white so the line doesn't hit the text)

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

Right, sorry, misunderstood what you meant by padding. Fixed.

来源：https://stackoverflow.com/questions/12429633/css-how-to-center-text-with-surrounding-borders

标签

center

css