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>

Answer 2

<div style="width=define_your_image_container_width_here">
  <div style="float:left;vertical-align:middle"><input type="radio" name="pic" value="1"/></div>
  <div style="float:right;"><img src="pic01.jpg"/></div>
</div>

Answer 3

In addition to the previous answer, the radio button must have the same actual height as the image for it to work. By actual I mean it must match height, padding, margin and border.