CSS Images not centering with radio inputs

Question

I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?

<div style="height:30px;">


            <input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;">&nbsp;&nbsp;&nbsp;<img src="/images/cards.png" style="margin-right:40px;">
            <input type="radio" name="pay_type">&nbsp;&nbsp;&nbsp;<img src="/images/pay-pal.png" style="margin-right:40px;">
            <input type="radio" name="pay_type">&nbsp;&nbsp;&nbsp;<img src="/images/amazon-payments.png">


</div>

Answer 1

I hope this is what you are looking for JSFIDDLE

I included another <div> which contains the input elements and tried to vertical-align this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.

However I have inline styles still. Change it once it works out for you.