垂直对齐单选按钮到图标

Question

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 ?

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;
}

I prepared a JSFiddle which shows my HTML / CSS.

http://jsfiddle.net/fk0zch3d/

Answer 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-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

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

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

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