イメージ付きボタンを横に並べる

ボタンにラベルだけでなくイメージを付けて表示したい場合、
まずボタンについては、

<div class="ui-block-a" style="text-align:center; font-size:20px;">
    <a data-role="button">
        <img src="hoge.png" /><br />ボタン名
    </a>
</div>

といった感じで。

次にjQueryMobile上で横に並べて表示する方法ですが、
Buttonのdata-iconをだと小さくイメージも指定できないっぽいので、
他にいろいろ試してみたところ、ui-gridクラスを使ったらしっくりきた。

fieldsetタグにui-grid-aクラス、子のdivタグにui-block-a(-b, -cと並べる数分増やす)の中に先ほどのボタンを配置。

<div data-role="header" data-theme="a">
    <h1>タイトル</h1>
</div>

<div data-role="content" data-theme="c">
    <fieldset class="ui-grid-a">
        <div class="ui-block-a" style="text-align:center; font-size:20px;">
            <a href="hoge.html" data-role="button"><img src="images/a.png" /><br />ボタンA</a>
        </div>
        <div class="ui-block-b" style="text-align:center; font-size:20px;">
            <a href="fuga.html" data-role="button"><img src="images/b.png" /><br />ボタンB</a>
        </div>
    </fieldset>
</div>

<div data-role="footer" data-theme="a">
    <p></p>
</div>

まだまた不勉強な感じなので、いろいろいじってみよう。