title: vertically center header text
body: <p>I am looking to increase the size of the header of a jquery mobile app.  When I do that I need the title to be centred.  I found that I can add a line like:</p>
  
  <pre><code>        line-height: 30px; 
  </code></pre>
  
  <p>to the css, but that is just far to much of a hack.  I assume there must be a better way to do it.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Page Title&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;&lt;!--
              .ui-header {
                  height: 50px;                
              }
              --&gt;
          &lt;/style&gt;  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role="page"&gt;
              &lt;div data-role="header"&gt;
                  &lt;h1&gt;This Needs To Be Centred Vertically&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;div data-role="content"&gt;
                  &lt;p&gt;Page content goes here.&lt;/p&gt;   
              &lt;/div&gt;
  
              &lt;div data-role="footer"&gt;
                  &lt;h4&gt;Page Footer&lt;/h4&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>