Вертикального выравнивания кнопки радио на иконку

Question

Хочу, чтобы выровнять мой Radio Buttons вертикально, что они находятся на середине. Как вы можете видеть на этом экране, они начинаются в нижней строке рядом с иконкой. Я думаю, что это ясно, чего я хочу достичь. Что я должен сделать, чтобы достичь этого красивым способом?

HTML:

<div class="payment-methods"> 
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div> 
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div> 
    <div class="method"><input checked="" name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div> 
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div> 
    <div class="method"><input name="1" type="radio"><label class="radio"><img src="https://lol-accs.com/images/ico_visa.jpg" alt=""></label></div> 
</div> 

CSS:

.method { 
    display: inline-block; 
} 

.payment-methods input[type=radio] { 
    margin: 5px 5px 0px 15px; 
} 

Я подготовил JSFiddle, который показывает мой HTML/CSS.

http://jsfiddle.net/fk0zch3d/

Answer 1

1. Применить vertical-align: middle к img и input.
2. Удалить margin-top от .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-methods input[type=radio] { 
 
    margin: 0px 5px 0px 15px; 
 
}

<div class="payment-methods"> 
 
    <div class="method"> 
 
    <input name="1" type="radio"> 
 
    <label class="radio"> 
 
     <img src="https://lol-accs.com/images/ico_visa.jpg" alt=""> 
 
    </label> 
 
    </div> 
 
    <div class="method"> 
 
    <input name="1" type="radio"> 
 
    <label class="radio"> 
 
     <img src="https://lol-accs.com/images/ico_visa.jpg" alt=""> 
 
    </label> 
 
    </div> 
 
    <div class="method"> 
 
    <input checked="" name="1" type="radio"> 
 
    <label class="radio"> 
 
     <img src="https://lol-accs.com/images/ico_visa.jpg" alt=""> 
 
    </label> 
 
    </div> 
 
    <div class="method"> 
 
    <input name="1" type="radio"> 
 
    <label class="radio"> 
 
     <img src="https://lol-accs.com/images/ico_visa.jpg" alt=""> 
 
    </label> 
 
    </div> 
 
    <div class="method"> 
 
    <input name="1" type="radio"> 
 
    <label class="radio"> 
 
     <img src="https://lol-accs.com/images/ico_visa.jpg" alt=""> 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

Вы ищете vertical-align: middle;, используемый с display: inline-block;.

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

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