垂直對齊單選按鈕到圖標

Question

我想垂直對齊我的單選按鈕，它們位於中間。 正如您在此屏幕中看到的那樣，它們從圖標旁邊的底線開始。 我認為它清楚我想要實現的目標。 我需要做些什么才能以美麗的方式實現這一目標？

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

我准備了一個顯示我的HTML / CSS的JSFiddle。

http://jsfiddle.net/fk0zch3d/

Answer 1

1. 將vertical-align: middle應用於img並input 。
2. 從.payment-methods input[type=radio]刪除margin-top （ 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/