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>

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

 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク