title: CSS Divider/Text Positioning
body: <p>I am having a bit of dilemma here with a CSS divider. Take a look: <a href="http://jsfiddle.net/fVxC6/1/" rel="nofollow">http://jsfiddle.net/fVxC6/1/</a></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>What i am trying to achieve is to have the text in the middle and a padding of say, 5px applied to it.</p>
  
  <p>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).</p>
  
  <p>I am almost sure there has to be a better solution than applying the border-top &amp; bottom and without using images but i couldn't find it..</p>
  
  <p>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</p>