title: Add centered text to the middle of a horizontal rule
body: <p>I'm wondering what options one has in xhtml 1.0 strict to create a line on both sides of text like-so:</p>
  
  <pre>
  Section one
  ----------------------- Next section -----------------------
  Section two
  </pre>
  
  <p>I've thought of doing some fancy things like this:</p>
  
  <pre><code>&lt;div style="float:left; width: 44%;"&gt;&lt;hr/&gt;&lt;/div&gt;
  &lt;div style="float:right; width: 44%;"&gt;&lt;hr/&gt;&lt;/div&gt;
  Next section
  </code></pre>
  
  <p>Or alternatively, because the above has problems with alignment (both vertical and horizontal):</p>
  
  <pre><code>&lt;table&gt;&lt;tr&gt;
  &lt;td style="width:47%"&gt;&lt;hr/&gt;&lt;/td&gt;
  &lt;td style="vertical-align:middle; text-align: center"&gt;Next section&lt;/td&gt;
  &lt;td style="width:47%"&gt;&lt;hr/&gt;&lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>This also has alignment problems, which I solve with this mess:</p>
  
  <pre><code>&lt;table&gt;&lt;tr&gt;
  &lt;td style="border-bottom: 1px solid gray; width: 47%"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td style="vertical-align:middle;text-align:center" rowspan="2"&gt;Next section&lt;/td&gt;
  &lt;td style="border-bottom: 1px solid gray; width: 47%"&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;
  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;td&gt;&amp;nbsp;&lt;/td&gt;
  &lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>In addition to the alignment problems, both options feel 'fudgy', and I'd be much obliged if you happened to have seen this before and know of an elegant solution.</p>