jquery mobile 1.2でヘッダーに表示されるボタンが上に寄っている時

·

jquery mobile 1.2をデフォルトで使用している時、
ヘッダーに埋めこまれる左右のボタンがヘッダーに対して上に寄っていることがある。
きちんと天地中央に配置するには二つの方法、いずれかを使えばいい。

まずはスタイルシート(CSS)で指定しやすいように、ヘッダーにIDを振っておく。

<div data-role="header" data-theme="c" id="header">

まずはヘッダーの天地を減らす方法
40pxの数値はお好みで。

<style>
#header {
height:40px;
}
</style>

もう一つはボタンの位置を下げる方法

<style>
#header .ui-btn-left, #header .ui-btn-right {
margin-top:5px;
}
</style>

それぞれ左右に指定したボタンの上にマージンを指定し下げる。