Question

jQuery Mobile 1.1.1 changes how buttons are formed. Previously, I could set the font size of buttons like this:

<div id="Button1" data-role='button' data-inline=true data-theme=c 
 data-icon=false data-iconpos=none style="font-size:12px;">Button</div>

The font size attribute is being ignored in 1.1.1. It draws with the default font size (16px?). I can change the font size by adding this line of code:

$('#Button1').children().children().css('font-size','12px');

But now the vertical alignment of the text is off: it aligns with the original font size text’s lower boundary.

Any ideas?

Answer 1

This sets the font size:

$('#Button1').children().children().css('font-size','12px')

To center the text, you will also want to change the padding:

$('#Button1').children().css('padding','6px')

(tested with jQuery Mobile 1.2)