CODEWITHSUNDEEP
jquery-mobile
TheSoul
TheSoul

Reputation: 5346

How to center an image inside a button, using jQuery Mobile?

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.

Upvotes: 1

Views: 3483

Answers (2)

den232
den232

Reputation: 730

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!

Upvotes: 1

Littm
Littm

Reputation: 4947

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; 
}

Upvotes: 0

Related Questions