垂直对齐单选按钮到图标

时间：2015-01-27 21:40:15

标签： html css css3

enter image description here

我想垂直对齐我的单选按钮，它们位于中间。正如您在此屏幕中看到的那样，它们从图标旁边的底线开始。我认为它清楚我想要实现的目标。我需要做些什么才能以美丽的方式实现这一目标？

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/

2 个答案:

答案 0 :(得分：2)

  1. 将vertical-align: middle应用于img和input。
  2. 从margin-top（.payment-methods input[type=radio] ---＆gt; margin: 5px 5px 0px 15px;）移除margin: 0px 5px 0px 15px;。

    3. ＆＃13;
    ＆＃13; 
    .method, img, input {
  display: inline-block;
  vertical-align: middle;
}
.payment-methods input[type=radio] {
  margin: 0px 5px 0px 15px;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 1 :(得分：1)

您正在寻找与vertical-align: middle;一起使用的display: inline-block;。

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

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

相关问题
最新问题