Search code examples
javascriptcsshtmljquery-mobileuibutton

How to align imagen inside a button JQM + HTML5?

I have this issue of aligning an image with text inside a button. I've managed to do so, but this solution sets an image with text as part of the image instead. Then again if I had to change the text I would need to change the image text. Therefore it's somewhat useless.

As second solution, I've got an image inside the button besides a text which isn't aligned with my image. what could I do to make them fit?

` Settings

Solution

  • You could create a new css class:

    .my-button img
{
    vertical-align:middle;
}

    Next add this class to your a tag:

    <a href="#" class="ui-btn ui-corner-all ui-shadow my-button">
   <img alt="logo2" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" height="40" width="40"/>Settings
</a>

    Your code modified here: http://jsfiddle.net/jtorrescr/GRzn5/2/