1

I'm new to jQuery mobile and Phonegap. Sorry if this is not the place to ask for this question.

I'm trying to put a custom image inside a button (not the small icon to the left or to the right but a bigger image).

I use the following code:

<a data-role="button" data-corners="false" data-shadow="false" >
    <img src="images/car.png" />
</a>

In the rendering, the image is not centered but goes right.

I have also tried using a class="car-icon" and the corresponding css3 rule:

.ui-icon-car-icon {
    background-image: url("car.png");   
}

.ui-icon-car-icon {
  text-align: center;
}

Any help will be greatly appreciated (I have spent the whole night trying to fix this).

Thanks in advance.

2 Answers 2

1

Try using the thing, like this: http://jsfiddle.net/den232/sFupf/

      <button><img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" height=35 width=35 ></button>

Good luck!

0

You can try setting your image as the background of your link <a>, and centering it using background-position: center center;:

HTML:

<a id="mybutton" data-role="button" data-corners="false" data-shadow="false" >&nbsp;</a>

CSS:

#mybutton {
    background: url('car.png') no-repeat scroll 0 0 transparent;
    background-position: center center; 
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.