html - how to align pic to the same line of the radio button? -

html - how to align pic to the same line of the radio button? -

i did float , inline doesn't work. hope guys help me. goes this

<form action="#"> <input type="radio" class="inline" name="pay" value="visa"><img src="pic1.gif"> <input type="radio" class="inline" name="pay" value="master"><img src="pic2.gif"> <input type="radio" class="inline" name="pay" value="paypal"><img src="pic3.jpg"> </form>

* * *

the output goes this: --------- ' pic ' '-------' *radio want this: --------- *radio ' pic ' '-------'

css:

.inline { display: inline-block; }

use vertical-align:middle img tag

html

<form action="#"> <input type="radio" class="inline" name="pay" value="visa"><img src="http://www.m8betting.com/m8betting/upload/3746/thumbs/image_placeholder8.gif"> <input type="radio" class="inline" name="pay" value="master"><img src="http://www.m8betting.com/m8betting/upload/3746/thumbs/image_placeholder8.gif"> <input type="radio" class="inline" name="pay" value="paypal"><img src="http://www.m8betting.com/m8betting/upload/3746/thumbs/image_placeholder8.gif"> </form>

css

img{ vertical-align:middle; }

fiddle sample

html css radio-button inline