title: Vertical align of radio button to icon
body: <p><img src="https://i.stack.imgur.com/kNls4.png" alt="enter image description here"></p>
  
  <p>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 want to achieve. What do I have to do to reach this in a beatiful way ?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="payment-methods"&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input checked="" name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.method {
      display: inline-block;
  }
  
  .payment-methods input[type=radio] {
      margin: 5px 5px 0px 15px;
  }
  </code></pre>
  
  <p>I prepared a JSFiddle which shows my HTML / CSS.</p>
  
  <p><a href="http://jsfiddle.net/fk0zch3d/" rel="nofollow noreferrer">http://jsfiddle.net/fk0zch3d/</a></p>