1

enter image description here

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/

DACrosby
  • 11,116
  • 3
  • 39
  • 51
kentor
  • 16,553
  • 20
  • 86
  • 144

2 Answers2

2
  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>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
  • Same question for me here as well. Why do I need to inline-block all elements ? Why do I need to set the vertical-align for the outer element as well ? Thanks for your help! – kentor Jan 27 '15 at 21:53
  • 1
    @kentor - You don't need to add `display: inline-block` to `img` or `input`. [They are inilne level by default](http://www.w3.org/TR/CSS21/sample.html). I've combined them together to avoid writing `vertical-align: middle` twice. I can separate them if you don't like it that way. :) – Weafs.py Jan 27 '15 at 21:55
1

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/

DACrosby
  • 11,116
  • 3
  • 39
  • 51
  • 1
    Can you explain me why I need to use inline-block for the inner elements as well ? I mean they are already inline by default, so why does vertical-align doesnt work without this ? Thanks for your answer and help! – kentor Jan 27 '15 at 21:49
  • I generally do it because it's very easy to override the style elsewhere. For example, if you set all of your `label`s to `display: block;`, but now these ones you need as `display: inline-block;`, simply adding `vertical-align middle;` wont work anymore because they're blocks. There's also some issues with cross-browser CSS defaults not all being the same, so it's good to just be direct with what you need. So, even if it's not specifically necessary always, I'll add easy lines like this to save headache in the future. – DACrosby Jan 28 '15 at 21:32