I am new to jQuery Mobile and I just started today. I am building a "mobile friendly" version of my desktop site and getting there very fast. However, I am not sure how to combat an issue I am having.

I built my theme using the Theme Builder and I have a button in my header. All is working so far; however, the button is not centered vertically in the header and would like to know how I can get this to happen. I was considering adding some padding via CSS, but I am sure there is a quicker way of doing this.

This is what I have done so far. Suggestions from the pro's would be appreciated.

3. <div data-role="page" id="NotaryAffiliations">
4. <div data-role="header" style="overflow:hidden;">
5. <p class="alignright">Professional Affiliations</p>
6. <a href="#MainPage" data-icon="home" class="ui-button-left">Home</a>
7. </div>
8. 
   
9. <div role="main" class="ui-content">
10. <p class="main-body">We are a proud member of:<br>
11. <ol class="main-body">
12. <li>American <abbr>Assoc.</abbr> of Notaries.</li>
13. <li>American Society of Notaries.</li>
14. <li>National Notary <abbr>Assoc.</abbr></li>
15. </ol>
16. </p>
17. </div>
18. </div>