Question

I’m using jQuery Mobile to develop a mobile website and want to use images in my “collapsible” elements.

My code is as follows:

    <div data-role="collapsible" data-collapsed="true">
        <h3><img src="images/combo_a_small.jpg" style="width: 40px; height: 40px;" alt="Indian Food" />Combos</h3>

The image appears correctly but the text always appears glued to the lower right hand corner of the image.

How can I get the text to center align vertically and horizontally to the right of the image? Thanks.

Answer 1

This fiddle Should work

http://jsfiddle.net/rogerblanton/xNUuz/

long story short float the image inside the h3 left and give the h3 a line height equal to the image height and it will center it in the middle of the image to the right for you.

Thanks!