How to middle vertical align a radio button against an image in html?

Question

I have multiple image of 100x100. I ask the user to choose one of them by putting an radio button before each of them.

This is the code :

<div>
   <input type="radio" name="pic" value="1"/><img src="pic01.jpg"/><br/>
   <input type="radio" name="pic" value="2"/><img src="pic02.jpg"/><br/>
   ....

and so on... But the problem is that the radio button renders at the bottom of the line and I want to make it come in the vertical middle of the image. I have tried style="vertical-align:middle" and it does not work.

Any ideas?

Answer 1

When applied to inline elements, vertical-align specifies where to align a certain part of the child element to a corresponding part of the parent's line box. For example, "middle" roughly aligns the middle parts of each. If you want to align two siblings, you'll need to apply the same vertical alignment to both, otherwise the element will align to the parent's baseline.

<style type="text/css">
  input[type="radio"], input[type="radio"]+label img {
    vertical-align: middle;
  }
</style>

<ul>
  <li>
    <input type="radio" name="pic" id="pic1" value="1" />
    <label for="pic1"><img src="pic1.jpg" alt="pic 1" /></label>
  </li>
  <li>
   <input type="radio" name="pic" id="pic2" value="2" />
   <label for="pic2"><img src="pic2.jpg" alt="pic 2" /></label>
  </li>
</ul>