Vertical Align Of Radio Button To Icon

I want to align my Radio Buttons vertically that they are on the middle. As you can see in this screen they start on the bottom line next to the icon. I think its clear what I wan

Solution 1:

1. Apply vertical-align: middle to img and input.
2. Remove margin-top from .payment-methods input[type=radio](margin: 5px 5px 0px 15px; ---> margin: 0px 5px 0px 15px;).

.method, img, input {
  display: inline-block;
  vertical-align: middle;
}
.payment-methodsinput[type=radio] {
  margin: 0px5px0px15px;
}

<divclass="payment-methods"><divclass="method"><inputname="1"type="radio"><labelclass="radio"><imgsrc="https://lol-accs.com/images/ico_visa.jpg"alt=""></label></div><divclass="method"><inputname="1"type="radio"><labelclass="radio"><imgsrc="https://lol-accs.com/images/ico_visa.jpg"alt=""></label></div><divclass="method"><inputchecked=""name="1"type="radio"><labelclass="radio"><imgsrc="https://lol-accs.com/images/ico_visa.jpg"alt=""></label></div><divclass="method"><inputname="1"type="radio"><labelclass="radio"><imgsrc="https://lol-accs.com/images/ico_visa.jpg"alt=""></label></div><divclass="method"><inputname="1"type="radio"><labelclass="radio"><imgsrc="https://lol-accs.com/images/ico_visa.jpg"alt=""></label></div></div>

Solution 2:

You're looking for vertical-align: middle;, used with display: inline-block;.

.method inpuit,
.methodlabel{
    display: inline-block;
    vertical-align: middle;
}

http://jsfiddle.net/daCrosby/fk0zch3d/1/