in Jquery mobile - change size of icon button in header - jquery-mobile

Question

im trying to add info "i" button in the header left size.
i did it but the button appear very small and not in the center of the header height.
this is the code of the header:
<div data-role="header" data-position="fixed">
<div>
<h2 style="text-align: center">something written here</h2>
</div>
</div><!-- /header -->
i want to enlarge the info "i" button, and also put it in the left and in the center of the height of the header line. how can i do this?
Thanks

Answer 1

Following is correct syntax
Remove div around h2, it will mess the jquery css.
Try Changing h2 to h1. So the button will come in center of the hearer height.
Try giving the button class... class="ui-btn-left"
<div data-role="header" data-position="inline">
<a href="index.html" data-icon="delete" class="ui-btn-left" >Button Left</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check" class="ui-btn-right" >Button Right</a>
</div>

Answer 2

Live Example:
http://jsfiddle.net/3EgrW/21/ (Width)
http://jsfiddle.net/3EgrW/35/ (Height)
JS:
// For all buttons use something like this
$('.ui-btn').css('width','50%');
// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');
// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');
UPDATE: (I think this is what you're looking for)
// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');
// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
HREF Me 1
HREF Me 2
HREF Me 3
HREF Me 4
</div>
</div>