title: How to create both-sided dotted line around a title?
body: <p>I'm trying to achieve a title (h1) at the top of a template like the following (the dots represent a vertically centered dot-image-line):</p>
  
  <p><a href="http://www.pixelplus.nl/klanten/klijsen/example.jpg" rel="nofollow noreferrer">title example http://www.pixelplus.nl/klanten/klijsen/example.jpg</a></p>
  
  <p>Usually I'd do this:</p>
  
  <pre><code>&lt;h1&gt;&lt;span&gt;This is a title&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>Center the text in the <code>h1</code> and add a background-color to the <code>span</code> as well as a little padding.</p>
  
  <p>In the current project I'm dealing with a transparent background over a <code>background-image</code>. So... the background-colored <code>span</code> won't fly.</p>
  
  <p>After trying a few things this comes closest:</p>
  
  <pre><code>&lt;header class="headerPage"&gt;
      &lt;div class="row"&gt;
          &lt;div class="dotted"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="title"&gt;&lt;h1&gt;This is a title&lt;/h1&gt;&lt;/div&gt;
          &lt;div class="dotted"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>header.headerPage {
      display: table;
      margin: 0 0 35px;
      width: 100%;
  }
  header.headerPage .row {display: table-row;}
  header.headerPage .row div {display: table-cell;}
  header.headerPage .row div.dotted {
      width: 10%;
      background: url('../img/line-dotted.svg') left center repeat-x transparent;
  }
  header.headerPage .row div.title {
      padding: 0 15px;
      text-align: center;
  }
  header.headerPage .row div.title &gt; * {display: inline;}
  header.headerPage .row div h1 {margin: 0;}
  </code></pre>
  
  <p>As you can see the header acts as a <code>table</code>. The problem is in the <code>width: 10%;</code> of the dotted-divs. How do I get these to have a variable width relative to the dynamic height of the <code>h1</code>? Hope this can be done in css / scss.</p>