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;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
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.