CSS: How to center text with surrounding borders


Tags: center,css

Problem :

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/

enter image description here

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/



Solution :

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.​


    CSS Howto..

    How to make my text appearing while scrolling website

    How to reference all the rows except the first one using css

    Disable the centring image function in a slideshow plugin?

    How do I make my images in my div change opacity on hover?

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How to create a top-footer and footer using foundation, just like foundation website

    How to break a overflowed navigation bar via CSS

    CSS - How to only apply a style to a div that is inside another div?

    How can I make 2 elements share the same rollover state in CSS?

    How do you achieve this backwards div effect? [closed]

    How to style my unordered list like a table?

    How to find elements and siblings within a tree

    How to move hamburger menu to the front of overlay menu

    How to add class CSS after ng-click to parent element?

    How to align like-buttons on my website between
    elements and put a white background to them?

    How can I place the text in this box like this with CSS?

    How to position the select element while using Chosen?

    How do I place a
    beside an image?

    How can I control when my css transitions happen and when they don't?

    How to disable and re-enable tabindex of hidden/visible elements?

    How do I make this list not break lines when browser size is changed?

    How to hide the button keeping the position? [duplicate]

    How to add a border around a canvas?

    How to prevent CSS table row expanding to parent height

    How to apply CSS style when ID is taken?

    How to align/move Vaadin buttons

    How can I change the paragraph formatting in the SharePoint RichHtmlField

    How do I emulate a page break with CSS and HTML?

    How to display just part of image on hover?

    How to give css sprites effect?