CSS Divider/Text Positioning

Question

I am having a bit of dilemma here with a CSS divider. Take a look: http://jsfiddle.net/fVxC6/1/

.div-line {
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    float: left;
    height: 1px;
    display: inline-block;
    margin: -14px 0 25px 0;
}

What i am trying to achieve is to have the text in the middle and a padding of say, 5px applied to it.

I have tried centering the text and applying a border-right and border-left but that didn't work (and that wouldn't have been the actual desired result as shown on demo, i have 2 lines which are actually the border-top and border-bottom properties).

I am almost sure there has to be a better solution than applying the border-top & bottom and without using images but i couldn't find it..

UPDATE: That is somewhat near what i tried to achieve but not exactly, probably i was not clear enough. I want the text to be positioned in the center - what is achieved with your code, but i also want it to "push" those borders, like 5 pixels to the left and 5px to the right, so a gap is created between them where the actual centered text is positioned

Answer 1

I took a different route then you since you to my reasoning you have to look at all elements as text and hence display them inline.

.div {
    width:960px;
    text-align:center;
}

.divider {
    font-size: 16px;
    font-weight: 400;
    background-color: #fff;
    padding-right: 10px;
        display: inline-block;
    width:10%;
    padding: 0 3px;
    vertical-align: middle;
}

.div-line {
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 40%;
    height: 1px;
    display: inline-block;
    vertical-align: middle;
}

Here's a fiddle