How to align image with radio button? - css

Question

I have 3 images of mXn pixels(approx), but on rendering, the image size increase due to zoom-in issue, as shown below:
Below is the html code,
<div class="cardtype">
<label>Cardtype:</label>
<input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
<input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
<input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
</div>
Below is the CSS code,
.cardtype input{
width: 8%;
}
.cardtype img{
width: 8%;
}
How do I align img and input radio button horizontally?
Is this something to do with image size? How do I decide the image size?
Is this something to do with image resolution? How do I decide the image resolution?

Answer 1

http://www.bootply.com/pYw1JhTXOW
Try to set size to image wrappers, not to images directly.

Answer 2

You can take radio button in label and make some padding to that image within label, for example :-
<div class="cardtype">
<label>Cardtype:</label>
<label class="radio">
<input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
</label>
<label class="radio">
<input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
</label>
<label class="radio">
<input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
</label>
</div>
Now do some css for that image :-
.radio img{
padding-top : 5px; //take as per your img these just for example
}

Answer 3

Try this out (use vertical-align):
CSS
.cardtype img{
width: 8%;
vertical-align: middle;
}
DEMO HERE

Answer 4

Here is how you do it. This will work for any image size.
Add the span around the image to help position it I gave it the class helper, you will also need to add a bit of css.
add this css:
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
width: 8%;
}
.helper img {
vertical-align: middle;
max-height: 25px;
}
try it here: http://jsfiddle.net/kLbvh139/