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

Question

I have several 100x100 images. I ask the user to select one of them by setting a switch in front of 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/>
   ....

etc. But the problem is that the radio button is displayed at the bottom of the line, and I want it to fall in the vertical middle of the image. I tried style="vertical-align:middle"and it does not work.

Any ideas?

Answer 1

vertical-align , . , "" . , , .

<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

, , . , , , .