单选按钮与图标垂直对齐 [英] 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 want to achieve. What do I have to do to reach this in a beatiful way ?

HTML：

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：

CSS:

.method {
    display: inline-block;
}

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

我准备了一个显示我的HTML / CSS的JSFiddle。

I prepared a JSFiddle which shows my HTML / CSS.

http://jsfiddle.net/fk0zch3d/

推荐答案

1. 将 vertical-align：middle code> img 和输入。


2. 删除 margin-top from .payment-methods input [type = radio] （ margin：5px 5px 0px 15px; ---> margin：0px 5px 0px 15px; ）。



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>

这篇关于单选按钮与图标垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！