This was used to center the control group in 1.1.0, but now it looks like it is not in 1.1.1.
<div data-theme="a" data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="foo" data-role="button">link1</a> <a href="boo" data-role="button">link2</a> </div> <div class="copy">© 2012 bigco</div> </div>
The align = "center" attribute data-role = "controlgroup" is probably suitable for this.
<div data-theme="a" data-role="footer" align="center"> <div data-role="controlgroup" data-type="horizontal" data-mini="true"> <a href="foo" data-role="button">link1</a> <a href="boo" data-role="button">link2</a> </div> <div class="copy">© 2012 bigco</div> </div>
http://jsfiddle.net/sGFTy/1/
I found a solution on this site: http://forum.jquery.com/topic/how-to-horizontally-center-a-set-of-grouped-buttons
CSS:
#navgroup {text-align:center;} #navgroup div {display:inline-block;}
HTML:
<div id="navgroup"> <div data-role="controlgroup" data-type="horizontal"> <a href="index.htm" data-role="button" data-theme="e" data-mini="true" class="active menu">Menu</a> <a href="specials.htm" data-role="button" data-theme="e" data-mini="true" class="specials">Specials</a> <a href="howitworks.htm" data-role="button" data-theme="e" data-mini="true" class="howitworks">FAQ</a> <a href="http://www.facebook.com" data-rel="external" data-role="button" data-theme="e" data-mini="true" class="feedback">Facebook</a> </div> </div>
The problem still persists if you use the $ ("Selector") show (). to display an element as it applies "display: block".
Instead of using .show () now use $ ("selector"). css ('display', 'inline-block');
Now I am on JQM 1.2 and it works for me ...
CSS
.center-controlgroup { text-align: center; }
HTML
<div data-role="controlgroup" data-type="horizontal" class="center-controlgroup">...</div>